/* ============================================================
   DEVGRU — Main Stylesheet
   ============================================================ */

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #172b4d;
  background: #f4f5f7;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: #0052cc; text-decoration: none; }
a:hover { text-decoration: underline; }

button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c7d0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #97a0af; }

/* ============================================================
   TOP NAV
   ============================================================ */
.topbar {
  background: #172b4d;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

.topbar .brand {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-dev { color: #FF5630; }
.logo-gru { color: #ffffff; }

.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.board-title-input {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  transition: background 0.15s;
}
.board-title-input:hover { background: rgba(255,255,255,0.2); }
.board-title-input:focus { background: rgba(255,255,255,0.25); cursor: text; }

.view-tabs {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 3px;
}
.view-tab {
  padding: 4px 12px;
  border-radius: 4px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
.view-tab:hover { background: rgba(255,255,255,0.15); color: #fff; }
.view-tab.active { background: rgba(255,255,255,0.2); color: #fff; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-nav {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.9);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-nav:hover { background: rgba(255,255,255,0.22); }
.btn-nav.active { background: rgba(255,255,255,0.25); }

.search-wrap {
  position: relative;
}
.search-input {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px 5px 28px;
  width: 170px;
  outline: none;
  transition: width 0.2s, background 0.15s, border 0.15s;
}
.search-input::placeholder { color: rgba(255,255,255,0.5); }
.search-input:focus {
  width: 220px;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}
.search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  pointer-events: none;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
}
.avatar-md {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ============================================================
   BOARD BACKGROUND / WRAPPER
   ============================================================ */
.board-bg {
  min-height: calc(100vh - 48px);
  background: linear-gradient(135deg,#0052cc,#2684ff);
  transition: background 0.3s;
}

/* ============================================================
   BOARD VIEW
   ============================================================ */
#view-board {
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: calc(100vh - 48px);
}

.lists-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  height: calc(100vh - 80px);
  padding-bottom: 16px;
}

/* ── List ── */
.list {
  background: #ebecf0;
  border-radius: 8px;
  width: 272px;
  min-width: 272px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: opacity 0.2s;
}
.list.drag-over { outline: 2px solid rgba(255,255,255,0.7); }

.list-header {
  display: flex;
  align-items: center;
  padding: 10px 12px 8px;
  gap: 6px;
  flex-shrink: 0;
}
.list-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #172b4d;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 2px 4px;
  line-height: 1.3;
  outline: none;
  cursor: pointer;
  word-break: break-word;
  resize: none;
  min-height: 22px;
  max-height: 60px;
  overflow: hidden;
}
.list-title:focus { background: #fff; box-shadow: 0 0 0 2px #0052cc; cursor: text; }

.list-menu-btn {
  background: none;
  border: none;
  color: #5e6c84;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.list-menu-btn:hover { background: rgba(0,0,0,0.08); color: #172b4d; }

.list-card-count {
  font-size: 11px;
  color: #97a0af;
  flex-shrink: 0;
}

/* ── Cards within list ── */
.list-cards {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  min-height: 4px;
}

/* ── Add List ── */
.add-list-wrap {
  min-width: 272px;
  width: 272px;
  flex-shrink: 0;
}
.add-list-btn {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.22);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.add-list-btn:hover { background: rgba(255,255,255,0.32); }

.add-list-form {
  background: #ebecf0;
  border-radius: 8px;
  padding: 10px;
  display: none;
}
.add-list-form.open { display: block; }
.add-list-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #0052cc;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,82,204,0.2);
  margin-bottom: 8px;
}
.add-list-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: box-shadow 0.12s, transform 0.12s;
  position: relative;
  border: 2px solid transparent;
}
.card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}
.card:hover .card-edit-btn { opacity: 1; }
.card.dragging { opacity: 0.5; transform: rotate(2deg); }
.card.drag-placeholder {
  background: #c1c7d0;
  border: 2px dashed #97a0af;
  box-shadow: none;
  min-height: 48px;
}

.card-cover {
  margin: -8px -10px 8px;
  height: 8px;
  border-radius: 4px 4px 0 0;
}
.card-cover.has-image {
  height: 120px;
  background-size: cover;
  background-position: center;
}

.card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}
.card-label {
  height: 8px;
  border-radius: 4px;
  min-width: 40px;
  padding: 0;
}
.card-label-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.card-title {
  font-size: 14px;
  color: #172b4d;
  line-height: 1.4;
  word-break: break-word;
  margin-bottom: 6px;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #5e6c84;
  padding: 1px 4px;
  border-radius: 3px;
}
.card-badge.overdue    { background: #ffebe6; color: #bf2600; }
.card-badge.due-soon   { background: #fffae6; color: #974f0c; }
.card-badge.due-done   { background: #e3fcef; color: #006644; }
.card-badge.checklist-done { color: #006644; }

.card-members {
  display: flex;
  margin-left: auto;
  gap: -4px;
}
.card-members .avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 9px;
  margin-left: -4px;
  border: 2px solid #fff;
}

.card-edit-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  color: #5e6c84;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ── Add Card ── */
.add-card-btn {
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #5e6c84;
  font-size: 13px;
  cursor: pointer;
  margin: 4px 0 8px;
  transition: background 0.12s, color 0.12s;
}
.add-card-btn:hover { background: rgba(0,0,0,0.06); color: #172b4d; }

.add-card-form {
  padding: 0 8px 8px;
  display: none;
}
.add-card-form.open { display: block; }
.add-card-textarea {
  width: 100%;
  padding: 8px;
  border: 1.5px solid #0052cc;
  border-radius: 4px;
  font-size: 14px;
  resize: none;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,82,204,0.2);
  min-height: 60px;
  margin-bottom: 8px;
}
.add-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: #FF5630;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: #de3616; }

.btn-secondary {
  background: rgba(9,30,66,0.08);
  color: #172b4d;
  border: none;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: rgba(9,30,66,0.14); }

.btn-danger {
  background: #de350b;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #bf2600; }

.btn-icon {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 4px;
  color: #5e6c84;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.btn-icon:hover { background: rgba(0,0,0,0.08); color: #172b4d; }

.btn-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #5e6c84;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s;
}
.btn-close:hover { background: rgba(0,0,0,0.08); }

/* ============================================================
   CARD DETAIL MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 24px;
  overflow-y: auto;
}
.modal-overlay.hidden { display: none; }

.card-modal {
  background: #f4f5f7;
  border-radius: 10px;
  width: 100%;
  max-width: 768px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  position: relative;
  animation: modal-in 0.18s ease;
}
@keyframes modal-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.card-modal-cover {
  height: 140px;
  border-radius: 10px 10px 0 0;
  display: none;
}
.card-modal-cover.has-color { display: block; }
.card-modal-cover.has-image { display: block; background-size: cover; background-position: center; }

.card-modal-body {
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 0;
}

.card-modal-main {
  padding: 20px 20px 24px;
}

.card-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #172b4d;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  width: 100%;
  outline: none;
  resize: none;
  line-height: 1.4;
  min-height: 30px;
  margin-bottom: 4px;
  cursor: text;
}
.card-modal-title:focus { background: #fff; box-shadow: 0 0 0 2px #0052cc; }

.card-modal-list-name {
  font-size: 12px;
  color: #97a0af;
  padding: 0 6px;
  margin-bottom: 16px;
}

/* Members + Labels row */
.card-meta-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.card-meta-section { }
.card-meta-label {
  font-size: 10px;
  font-weight: 700;
  color: #5e6c84;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.card-meta-members {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.card-meta-labels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.meta-label-chip {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.12s;
}
.meta-label-chip:hover { opacity: 0.85; }

.due-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.due-badge.normal   { background: #ebecf0; color: #5e6c84; }
.due-badge.due-soon { background: #fffae6; color: #974f0c; }
.due-badge.overdue  { background: #ffebe6; color: #bf2600; }
.due-badge.done     { background: #e3fcef; color: #006644; }

/* Description */
.card-desc-area {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  background: rgba(9,30,66,0.04);
  color: #172b4d;
  outline: none;
  transition: background 0.15s, border 0.15s;
  cursor: pointer;
}
.card-desc-area:hover { background: rgba(9,30,66,0.08); }
.card-desc-area:focus { background: #fff; border-color: #0052cc; cursor: text; }

/* Checklist */
.section-heading {
  font-size: 13px;
  font-weight: 700;
  color: #172b4d;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-icon { font-size: 16px; }

.checklist {
  margin-bottom: 18px;
}
.checklist-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.checklist-title {
  font-size: 14px;
  font-weight: 700;
  color: #172b4d;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
}
.checklist-title:focus { background: #fff; box-shadow: 0 0 0 2px #0052cc; cursor: text; }

.checklist-progress-bar {
  height: 6px;
  background: #ebecf0;
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}
.checklist-progress-fill {
  height: 100%;
  background: #36b37e;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.checklist-progress-fill.done { background: #36b37e; }

.checklist-progress-label {
  font-size: 11px;
  color: #5e6c84;
  margin-bottom: 8px;
  text-align: right;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.12s;
}
.checklist-item:hover { background: rgba(9,30,66,0.05); }
.checklist-item input[type=checkbox] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #0052cc;
  flex-shrink: 0;
}
.checklist-item-text {
  font-size: 13px;
  color: #172b4d;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 2px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.4;
}
.checklist-item-text:focus { background: #fff; box-shadow: 0 0 0 2px #0052cc; cursor: text; }
.checklist-item.done .checklist-item-text { text-decoration: line-through; color: #97a0af; }
.checklist-item-del {
  background: none; border: none;
  font-size: 14px; color: #97a0af;
  cursor: pointer; padding: 0 3px;
  opacity: 0; transition: opacity 0.12s;
  flex-shrink: 0;
}
.checklist-item:hover .checklist-item-del { opacity: 1; }

.add-item-btn {
  background: none; border: none;
  color: #5e6c84; font-size: 12px;
  padding: 4px 6px; border-radius: 4px;
  cursor: pointer; margin-top: 4px;
  transition: background 0.12s;
}
.add-item-btn:hover { background: rgba(0,0,0,0.06); color: #172b4d; }

/* Activity */
.activity-list { display: flex; flex-direction: column; gap: 12px; }
.activity-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.activity-content { flex: 1; }
.activity-user { font-size: 12px; font-weight: 700; color: #172b4d; }
.activity-text { font-size: 12px; color: #5e6c84; }
.activity-time { font-size: 11px; color: #97a0af; margin-top: 2px; }
.activity-comment-body {
  background: #fff;
  border: 1.5px solid #dfe1e6;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: #172b4d;
  margin-top: 4px;
  line-height: 1.5;
}
.comment-form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.comment-input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #dfe1e6;
  border-radius: 4px;
  font-size: 13px;
  resize: none;
  background: #fff;
  outline: none;
  transition: border 0.15s, min-height 0.15s;
  min-height: 36px;
  line-height: 1.5;
}
.comment-input:focus { border-color: #0052cc; min-height: 72px; }

/* Attachments */
.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(9,30,66,0.04);
  border-radius: 4px;
  margin-bottom: 6px;
}
.attachment-thumb {
  width: 48px;
  height: 36px;
  background: #ebecf0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.attachment-info { flex: 1; min-width: 0; }
.attachment-name {
  font-size: 13px;
  font-weight: 600;
  color: #0052cc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.attachment-meta { font-size: 11px; color: #97a0af; }

/* ── Card Modal Sidebar ── */
.card-modal-sidebar {
  padding: 20px 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #5e6c84;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  margin-top: 10px;
}
.sidebar-section-title:first-child { margin-top: 0; }
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: rgba(9,30,66,0.08);
  border: none;
  border-radius: 4px;
  color: #172b4d;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.sidebar-btn:hover { background: rgba(9,30,66,0.15); }

/* ============================================================
   PANEL OVERLAYS (Team Management, Filters, etc.)
   ============================================================ */
.panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  justify-content: flex-end;
}
.panel-overlay.hidden { display: none; }

.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.panel {
  position: relative;
  background: #fff;
  width: 360px;
  max-width: 100%;
  height: 100%;
  box-shadow: -4px 0 24px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  animation: panel-in 0.22s ease;
}
@keyframes panel-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid #ebecf0;
  flex-shrink: 0;
}
.panel-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: #172b4d;
  flex: 1;
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

/* ── Member list inside panel ── */
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f4f5f7;
}
.member-row:last-child { border-bottom: none; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 600; color: #172b4d; }
.member-email { font-size: 11px; color: #97a0af; }
.role-select {
  border: 1.5px solid #dfe1e6;
  border-radius: 4px;
  font-size: 12px;
  padding: 3px 6px;
  background: #fff;
  color: #172b4d;
  cursor: pointer;
  outline: none;
}
.role-select:focus { border-color: #0052cc; }

/* ── Invite form ── */
.invite-form {
  background: #f4f5f7;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 16px;
}
.invite-form h3 { font-size: 13px; font-weight: 700; color: #172b4d; margin-bottom: 10px; }
.invite-row { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.form-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.form-label {
  font-size: 11px;
  font-weight: 600;
  color: #5e6c84;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.form-input {
  padding: 7px 10px;
  border: 1.5px solid #dfe1e6;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border 0.15s;
  width: 100%;
}
.form-input:focus { border-color: #0052cc; }
.form-select {
  padding: 7px 10px;
  border: 1.5px solid #dfe1e6;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border 0.15s;
}
.form-select:focus { border-color: #0052cc; }

/* ============================================================
   GANTT VIEW
   ============================================================ */
#view-gantt {
  padding: 20px;
  min-height: calc(100vh - 48px);
  background: rgba(0,0,0,0.15);
}

.gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gantt-toolbar select,
.gantt-toolbar .form-input {
  background: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  font-size: 12px;
  padding: 5px 8px;
  color: #172b4d;
  outline: none;
}

.gantt-wrap {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.gantt-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; }
.gantt-table thead th {
  background: #f4f5f7;
  color: #5e6c84;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid #dfe1e6;
  white-space: nowrap;
}
.gantt-table thead th.info-col { padding: 10px 14px; min-width: 200px; max-width: 200px; border-right: 2px solid #dfe1e6; }
.gantt-table thead th.assignee-col { padding: 10px 8px; min-width: 76px; border-right: 2px solid #dfe1e6; }
.gantt-table thead th.date-col { padding: 8px 0; min-width: 40px; text-align: center; font-size: 10px; }
.gantt-table thead th.date-col.today-col { background: #e8f0ff; color: #0052cc; }
.gantt-table thead th.month-header { padding: 6px 14px; background: #ebecf0; font-size: 11px; font-weight: 700; color: #172b4d; border-bottom: 1px solid #dfe1e6; text-align: left; }

.gantt-row { transition: background 0.12s; }
.gantt-row:hover { background: #f8f9ff; }
.gantt-row.hidden-row { opacity: 0.35; }
.gantt-row td { border-bottom: 1px solid #f0f1f3; vertical-align: middle; }

.gantt-info-cell {
  padding: 6px 14px;
  background: #fff;
  border-right: 2px solid #dfe1e6;
  display: flex; align-items: center; gap: 6px;
  min-width: 200px; max-width: 200px;
}
.gantt-row:hover .gantt-info-cell { background: #f8f9ff; }
.gantt-row.hidden-row .gantt-info-cell { background: #fafafa; }
.gantt-task-name {
  font-weight: 600; color: #172b4d; font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 140px; cursor: pointer;
}
.gantt-task-list { font-size: 10px; color: #97a0af; margin-left: auto; flex-shrink: 0; white-space: nowrap; }

.gantt-hide-btn {
  background: none; border: none; flex-shrink: 0;
  font-size: 12px; color: #97a0af;
  cursor: pointer; padding: 0;
  transition: color 0.12s;
}
.gantt-hide-btn:hover { color: #172b4d; }
.gantt-row.hidden-row .gantt-hide-btn { color: #0052cc; }

.gantt-assignee-cell {
  padding: 6px 8px;
  background: #fff;
  border-right: 2px solid #dfe1e6;
  min-width: 76px;
}
.gantt-row:hover .gantt-assignee-cell { background: #f8f9ff; }
.gantt-assignees { display: flex; }
.gantt-assignee-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  border: 2px solid #fff; margin-left: -6px;
}
.gantt-assignee-avatar:first-child { margin-left: 0; }

.gantt-day-cell { min-width: 40px; height: 42px; position: relative; padding: 0; }
.gantt-weekend { background: rgba(0,0,0,0.025); }
.gantt-day-cell.today-col, th.date-col.today-col { background: rgba(0,82,204,0.04); }

.gantt-bar {
  position: absolute;
  top: 8px; left: 4px; height: 26px;
  border-radius: 4px;
  display: flex; align-items: center;
  padding: 0 8px;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  transition: filter 0.12s;
}
.gantt-bar:hover { filter: brightness(1.1); }
.gantt-bar .bar-label {
  position: relative; color: #fff; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-bar-progress {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,0.25); border-radius: 4px 0 0 4px;
}

.gantt-today-line {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; background: #FF5630; z-index: 1;
}

.gantt-group-row td {
  background: #ebecf0; padding: 5px 14px; font-size: 11px; font-weight: 700;
  color: #5e6c84; text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid #dfe1e6;
}

/* Due-date badge — also reused by the Team Workload view */
.gantt-due {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.gantt-due.overdue  { background: #ffebe6; color: #bf2600; }
.gantt-due.due-soon { background: #fffae6; color: #974f0c; }
.gantt-due.done     { background: #e3fcef; color: #006644; }
.gantt-due.normal   { background: #ebecf0; color: #5e6c84; }

/* ============================================================
   TEAM / WORKLOAD VIEW
   ============================================================ */
#view-team {
  padding: 20px;
  min-height: calc(100vh - 48px);
  background: rgba(0,0,0,0.15);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.team-member-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.team-member-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.team-member-info { flex: 1; min-width: 0; }
.team-member-name { font-size: 14px; font-weight: 700; color: #172b4d; }
.team-member-role { font-size: 11px; color: #97a0af; }

.workload-bar-wrap { margin-bottom: 12px; }
.workload-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #5e6c84;
  margin-bottom: 4px;
}
.workload-bar {
  height: 6px;
  background: #ebecf0;
  border-radius: 3px;
  overflow: hidden;
}
.workload-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.team-task-list { display: flex; flex-direction: column; gap: 6px; }
.team-task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #f4f5f7;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.team-task-item:hover { background: #ebecf0; }
.team-task-title {
  font-size: 12px;
  color: #172b4d;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-task-list-name {
  font-size: 10px;
  color: #97a0af;
  flex-shrink: 0;
}

/* ============================================================
   POPOVER / DROPDOWN
   ============================================================ */
.popover {
  position: absolute;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  z-index: 600;
  min-width: 180px;
  animation: popover-in 0.12s ease;
}
@keyframes popover-in {
  from { transform: scale(0.95) translateY(-4px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
.popover.hidden { display: none; }
.popover-title {
  font-size: 11px;
  font-weight: 700;
  color: #97a0af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px 6px;
  border-bottom: 1px solid #ebecf0;
}
.popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #172b4d;
  cursor: pointer;
  transition: background 0.1s;
}
.popover-item:hover { background: #f4f5f7; }
.popover-item.danger { color: #de350b; }
.popover-item.danger:hover { background: #ffebe6; }
.popover-sep { height: 1px; background: #ebecf0; margin: 4px 0; }

/* ── Label picker popover ── */
.label-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.label-picker-item:hover { background: #f4f5f7; }
.label-swatch {
  width: 40px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}
.label-picker-name { font-size: 12px; font-weight: 600; color: #172b4d; flex: 1; }
.label-check { color: #0052cc; font-size: 14px; }
.label-picker-list { max-height: 240px; overflow-y: auto; }
.label-edit-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: 4px;
  opacity: 0.6; transition: opacity 0.12s, background 0.12s;
  flex-shrink: 0;
}
.label-edit-btn:hover { opacity: 1; background: #ebecf0; }
.label-create-btn {
  width: 100%; text-align: center; color: #0052cc; font-weight: 600;
  border-top: 1px solid #ebecf0;
}
.label-edit-title { display: flex; align-items: center; gap: 8px; }
.label-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: #5e6c84; padding: 2px 4px;
}
.label-back-btn:hover { color: #172b4d; }

/* ── Shared color picker (labels + card covers) ── */
.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.color-swatch {
  width: 100%;
  aspect-ratio: 1.4;
  min-height: 22px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.08s;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.selected { border-color: #172b4d; box-shadow: 0 0 0 1px #fff inset; }
.color-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.color-custom-row input[type="color"] {
  width: 32px; height: 26px;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background: none;
}

/* ── Member picker ── */
.member-picker-input {
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1.5px solid #ebecf0;
  font-size: 13px;
  outline: none;
  border-radius: 6px 6px 0 0;
}
.member-picker-input:focus { border-bottom-color: #0052cc; }
.member-picker-list { max-height: 220px; overflow-y: auto; }
.member-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.member-picker-item:hover { background: #f4f5f7; }
.member-picker-name { font-size: 12px; font-weight: 600; color: #172b4d; }

/* ── Date picker ── */
.date-input-field {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid #dfe1e6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  margin: 8px 12px;
  width: calc(100% - 24px);
  box-sizing: border-box;
}
.date-input-field:focus { border-color: #0052cc; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: toast-in 0.2s ease;
  pointer-events: auto;
  max-width: 360px;
  text-align: center;
}
@keyframes toast-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.toast.success { background: #006644; }
.toast.error   { background: #bf2600; }
.toast.info    { background: #0052cc; }

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(0,82,204,0.2);
  border-top-color: #0052cc;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.7);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-overlay.hidden { display: none; }

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex { display: flex; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.align-center { align-items: center; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.text-sm   { font-size: 12px; }
.text-muted{ color: #97a0af; }
.fw-700 { font-weight: 700; }

/* ============================================================
   DARK MODE  (body.dark)
   ============================================================ */
body.dark {
  color: #e8e8ee;
  background: #1e1e26;
}

body.dark .topbar { background: #1a1a2e; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
body.dark .logo-gru { color: #c8c8d0; }

body.dark .board-bg { /* background set via JS */ }

body.dark .list { background: #28282f; }
body.dark .list-title { color: #e8e8ee; }
body.dark .list-menu-btn { color: #9898a8; }
body.dark .list-menu-btn:hover { background: rgba(255,255,255,0.08); color: #e8e8ee; }
body.dark .list-card-count { color: #686878; }

body.dark .card { background: #35353f; box-shadow: 0 1px 3px rgba(0,0,0,0.4); color: #e8e8ee; }
body.dark .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
body.dark .card-title { color: #e8e8ee; }
body.dark .card-badge { color: #9898a8; }
body.dark .card-members .avatar-sm { border-color: #35353f; }
body.dark .card-edit-btn { background: rgba(40,40,47,0.9); color: #9898a8; }

body.dark .add-list-btn { background: rgba(255,255,255,0.1); }
body.dark .add-list-btn:hover { background: rgba(255,255,255,0.18); }
body.dark .add-list-form { background: #28282f; }
body.dark .add-list-input { background: #1e1e26; color: #e8e8ee; border-color: #0052cc; }

body.dark .add-card-btn { color: #9898a8; }
body.dark .add-card-btn:hover { background: rgba(255,255,255,0.06); color: #e8e8ee; }
body.dark .add-card-textarea { background: #1e1e26; color: #e8e8ee; border-color: #0052cc; }

body.dark .modal-overlay { background: rgba(0,0,0,0.7); }
body.dark .card-modal { background: #1e1e26; }
body.dark .card-modal-title { color: #e8e8ee; }
body.dark .card-modal-title:focus { background: #28282f; }
body.dark .card-modal-list-name { color: #686878; }
body.dark .card-meta-label { color: #9898a8; }
body.dark .card-desc-area { background: rgba(255,255,255,0.04); color: #e8e8ee; }
body.dark .card-desc-area:hover { background: rgba(255,255,255,0.08); }
body.dark .card-desc-area:focus { background: #28282f; border-color: #0052cc; }
body.dark .section-heading { color: #e8e8ee; }
body.dark .checklist-title { color: #e8e8ee; }
body.dark .checklist-title:focus { background: #28282f; }
body.dark .checklist-item:hover { background: rgba(255,255,255,0.04); }
body.dark .checklist-item-text { color: #e8e8ee; }
body.dark .checklist-item-text:focus { background: #28282f; }
body.dark .checklist-item.done .checklist-item-text { color: #686878; }
body.dark .checklist-progress-bar { background: #35353f; }
body.dark .add-item-btn { color: #9898a8; }
body.dark .add-item-btn:hover { background: rgba(255,255,255,0.06); color: #e8e8ee; }
body.dark .activity-user { color: #e8e8ee; }
body.dark .activity-text { color: #9898a8; }
body.dark .activity-comment-body { background: #28282f; border-color: #35353f; color: #e8e8ee; }
body.dark .comment-input { background: #28282f; border-color: #35353f; color: #e8e8ee; }
body.dark .attachment-item { background: rgba(255,255,255,0.04); }
body.dark .attachment-thumb { background: #35353f; }
body.dark .sidebar-btn { background: rgba(255,255,255,0.08); color: #e8e8ee; }
body.dark .sidebar-btn:hover { background: rgba(255,255,255,0.14); }

body.dark .panel { background: #28282f; }
body.dark .panel-header { border-bottom-color: #35353f; }
body.dark .panel-header h2 { color: #e8e8ee; }
body.dark .member-row { border-bottom-color: #35353f; }
body.dark .member-name { color: #e8e8ee; }
body.dark .invite-form { background: #1e1e26; }
body.dark .invite-form h3 { color: #e8e8ee; }
body.dark .form-label { color: #9898a8; }
body.dark .form-input { background: #35353f; border-color: #35353f; color: #e8e8ee; }
body.dark .form-input:focus { border-color: #0052cc; }
body.dark .form-select { background: #35353f; border-color: #35353f; color: #e8e8ee; }
body.dark .role-select { background: #35353f; border-color: #35353f; color: #e8e8ee; }

body.dark .popover { background: #28282f; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
body.dark .popover-title { color: #686878; border-bottom-color: #35353f; }
body.dark .popover-item { color: #e8e8ee; }
body.dark .popover-item:hover { background: #35353f; }
body.dark .popover-sep { background: #35353f; }
body.dark .label-picker-item:hover { background: #35353f; }
body.dark .label-picker-name { color: #e8e8ee; }
body.dark .label-edit-btn:hover { background: #35353f; }
body.dark .label-create-btn { border-top-color: #35353f; }
body.dark .label-back-btn { color: #9898a8; }
body.dark .label-back-btn:hover { color: #e8e8ee; }
body.dark .color-swatch.selected { border-color: #e8e8ee; }
body.dark .color-custom-row input[type="color"] { border-color: #35353f; }
body.dark .member-picker-input { background: #28282f; color: #e8e8ee; border-bottom-color: #35353f; }
body.dark .member-picker-item:hover { background: #35353f; }
body.dark .member-picker-name { color: #e8e8ee; }
body.dark .date-input-field { background: #35353f; border-color: #35353f; color: #e8e8ee; }

body.dark .gantt-wrap { background: #28282f; }
body.dark .gantt-table thead th { background: #28282f; color: #9090a8; border-bottom-color: rgba(255,255,255,0.08); }
body.dark .gantt-table thead th.month-header { background: #222230; color: #c8c8d8; border-bottom-color: rgba(255,255,255,0.08); }
body.dark .gantt-table thead th.date-col.today-col { background: #2a3550; color: #6ca3ff; }
body.dark .gantt-row td { border-bottom-color: rgba(255,255,255,0.05); }
body.dark .gantt-row:hover { background: #2d2d38; }
body.dark .gantt-row:hover .gantt-info-cell,
body.dark .gantt-row:hover .gantt-assignee-cell { background: #2d2d38; }
body.dark .gantt-info-cell,
body.dark .gantt-assignee-cell { background: #1e1e26; border-right-color: #35353f; }
body.dark .gantt-row.hidden-row .gantt-info-cell { background: #18181f; }
body.dark .gantt-task-name { color: #e8e8ee; }
body.dark .gantt-task-list { color: #707088; }
body.dark .gantt-hide-btn { color: #55556a; }
body.dark .gantt-group-row td { background: #252530; color: #8080a0; border-bottom-color: rgba(255,255,255,0.06); }
body.dark .gantt-weekend { background: rgba(255,255,255,0.02); }
body.dark .gantt-day-cell.today-col { background: rgba(255,86,48,0.06); }
body.dark .gantt-assignee-avatar { border-color: #1e1e26; }

body.dark .team-member-card { background: #28282f; }
body.dark .team-member-name { color: #e8e8ee; }
body.dark .workload-bar { background: #35353f; }
body.dark .team-task-item { background: #35353f; }
body.dark .team-task-item:hover { background: #3f3f4f; }
body.dark .team-task-title { color: #e8e8ee; }

body.dark .btn-secondary { background: rgba(255,255,255,0.08); color: #e8e8ee; }
body.dark .btn-secondary:hover { background: rgba(255,255,255,0.14); }
body.dark .btn-icon { color: #9898a8; }
body.dark .btn-icon:hover { background: rgba(255,255,255,0.08); color: #e8e8ee; }
body.dark .btn-close { color: #9898a8; }
body.dark .btn-close:hover { background: rgba(255,255,255,0.08); }
body.dark .search-input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #e8e8ee;
}
body.dark .search-input:focus {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}