/* ==========================================================
   🧭 project_dashboard.css — streamlined & aligned build
   ========================================================== */

/* --- Shared container --- */
#project-cards-container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1rem;
}

/* =========================
   CLIENT VIEW — Horizontal Cards
   ========================= */
#project-cards-container:not(.admin-list-view) {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-border-light);
}

/* Scrollbar aesthetic */
#project-cards-container::-webkit-scrollbar {
  height: 8px;
}
#project-cards-container::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}
#project-cards-container::-webkit-scrollbar-track {
  background: var(--color-border-light);
}

/* Individual project card */
/* === Card sizing & layout tweaks === */
.project-card {
  flex: 0 0 400px;
  max-width: 350px;       /* keep consistent card width */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--color-border-light);
  border-top: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* Heading now only for project name */
.project-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

/* Status moved visually to next line */
.project-card .status {
  display: block;              /* break to new line */
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}



.project-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0.25rem 0;
}

.progress-bar {
  background: var(--color-border-light);
  height: 6px;
  border-radius: 3px;
  margin: 0.6rem 0 0.8rem;
  overflow: hidden;
}
.progress-bar .progress {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Action button */
.project-card .btn {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  align-self: start;
  transition: background var(--transition-speed);
}
.project-card .btn:hover {
  background: var(--color-accent-light);
}

/* =========================
   ADMIN / PM VIEW (table)
   ========================= */
.admin-project-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: 1rem;
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-project-table th,
.admin-project-table td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.admin-project-table th {
  background: var(--panel-wash);
  color: var(--color-muted-dark);
  font-weight: 600;
}

.admin-project-table tr:hover {
  background: var(--panel-wash-2);
}

/* Icons and actions */
.table-action {
  margin-right: 0.6rem;
  color: var(--color-primary);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.table-action:hover {
  color: var(--color-accent);
  transform: scale(1.15);
}

/* Progress bar inside table cell */
.progress-bar.small {
  width: 90px;
  height: 5px;
  background: var(--color-border-light);
  border-radius: 3px;
}
.progress-bar.small .progress {
  background: var(--color-primary);
  height: 100%;
  border-radius: 3px;
}

/* Widened date columns */
.admin-project-table th:nth-child(3),
.admin-project-table th:nth-child(4),
.admin-project-table td:nth-child(3),
.admin-project-table td:nth-child(4) {
  min-width: 140px;
  white-space: nowrap;
}

.admin-project-table td:nth-child(3),
.admin-project-table td:nth-child(4) {
  color: var(--color-muted-dark);
  font-weight: 500;
}

/* Status dropdown */
.status-select {
  border: 1px solid var(--color-border-light);
  border-radius: 5px;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  background: var(--card);
  color: var(--color-text);
}
.status-select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-focus);
}

/* Status color helpers */
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-onhold); }
.text-danger  { color: var(--color-danger); }
.text-muted   { color: var(--color-muted); }

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */
@media (max-width: 768px) {
  .admin-project-table th:nth-child(3),
  .admin-project-table td:nth-child(3),
  .admin-project-table th:nth-child(4),
  .admin-project-table td:nth-child(4) {
    display: none;
  }

  #project-cards-container:not(.admin-list-view) {
    gap: 0.8rem;
    padding: 0.5rem 0.5rem 1rem;
  }

  .project-card {
    flex: 0 0 260px;
    padding: 1rem;
  }

  .project-card h4 {
    font-size: 1rem;
  }
}

/* ==========================================================
   🎯 Milestones — Timeline Layout
   ========================================================== */

#milestones-section {
  margin-top: 2rem;
  position: relative;
  padding-left: 2.5rem;
  border-left: 3px solid var(--color-border-light);
}

.milestone-block {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 1.2rem;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.milestone-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Connector dot */
.milestone-block::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 1.1rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-border-light);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-border-light);
}

/* States */
.milestone-block.active::before {
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.milestone-block.completed::before {
  background: var(--status-success);
  box-shadow: 0 0 0 2px var(--status-success);
}

.milestone-block.pending::before {
  background: var(--status-onhold);
  box-shadow: 0 0 0 2px var(--status-onhold);
}

.milestone-header {
  padding: 1rem 1.2rem 0.4rem;
  border-bottom: 1px solid var(--color-border-light);
}

.milestone-title-line strong {
  font-size: 1.05rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.milestone-summary {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.milestone-header small {
  display: inline-block;
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-top: 0.1rem;
}

/* Action icons row */
/* ==========================================================
   💳 Milestone Actions Row (with payment button)
   ========================================================== */

.milestone-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-light);
}

.actions-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0.9rem;
}

.actions-right {
  display: flex;
  align-items: center;
  
  margin: 0.9rem;
}

.pay-btn {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.85rem;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease;
}
.pay-btn:hover {
  background: var(--color-primary-light);
}

.paid-status {
  color: var(--status-success);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.action-icon {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.action-icon:hover {
  color: var(--color-accent);
  transform: scale(1.15);
}


.milestone-actions .action-icon {
  color: var(--color-primary);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.milestone-actions .action-icon:hover {
  color: var(--color-accent);
  transform: scale(1.1);
}

/* Collapsible panel (files, tasks, etc.) */
.milestone-panel {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-light);
  border-radius: 0 0 8px 8px;
  padding: 1rem 1.2rem;
  margin-top: 0.2rem;
}

.milestone-panel.hidden {
  display: none;
}

/* Add milestone button */
.milestone-add-control {
  text-align: center;
  margin-top: 1.5rem;
}
.milestone-add-control .btn.primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.milestone-add-control .btn.primary:hover {
  background: var(--color-primary-light);
}

/* RTL support */
[dir="rtl"] #milestones-section {
  border-left: none;
  border-right: 3px solid var(--color-border-light);
  padding-left: 0;
  padding-right: 2.5rem;
}
[dir="rtl"] .milestone-block {
  padding-left: 0;
  padding-right: 1.2rem;
}
[dir="rtl"] .milestone-block::before {
  left: auto;
  right: -2rem;
}

/* Flip for Arabic (rtl) */
html[dir="rtl"] .milestone-actions {
  flex-direction: row-reverse;       /* swap the whole row */
}
html[dir="rtl"] .actions-left {
  flex-direction: row-reverse;       /* reverse icon order */
}
html[dir="rtl"] .actions-right {
  flex-direction: row-reverse;       /* button still stays at opposite side */
}
/* ==========================================================
   📁 File Panels — Consistent with Milestones & Dashboard
   ========================================================== */

/* Wrapper around all file items */
.file-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0;
}

/* Individual file row */
.file-item {
  display: flex;
  align-items: left;
  justify-content: space-between;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s ease, transform 0.1s ease;
  width: 450px;
}

.file-item:hover {
  background: var(--panel-wash);
  transform: translateY(-1px);
}

/* Left area — icon + name */
.file-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.file-info i.fa-file {
  color: var(--color-primary);
  font-size: 1rem;
}

.file-name {
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  word-break: break-all;
  text-align: left;
}

/* Meta section (uploader, date, etc.) */
.file-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.1rem;
}

/* Right side actions */
.file-action {
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.2s ease;
  font-size: 1rem;
}

.file-action:hover {
  color: var(--color-accent);
}

/* Upload button block */
.upload-control {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.8rem;
}

.upload-control .btn.small {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}

.upload-control .btn.small:hover {
  background: var(--color-primary-light);
}

/* Light separator when multiple file sets exist */
.file-group + .file-group {
  border-top: 1px dashed var(--color-border-light);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 640px) {
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .upload-control {
    justify-content: center;
  }
}

/* ==========================================================
   💬 Chat Workroom
   ========================================================== */

.chat-workroom-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-workroom {
  width: 90%;
  max-width: 850px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* --- header --- */
.chat-workroom__header {
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
}

.chat-workroom__title {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-workroom__close {
  background: transparent;
  border: none;
  color: var(--color-white);
  font-size: 1.2rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.chat-workroom__close:hover {
  opacity: 0.8;
}

/* --- body --- */
.chat-workroom__body {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* --- chat panel sections --- */
.chat-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.chat-panel h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.4rem;
}

/* --- messages --- */
.message-thread {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.msg-bubble {
  display: inline-block;
  max-width: 75%;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.msg-bubble.left {
  align-self: flex-start;
  background: var(--panel-wash);
  border: 1px solid var(--color-border-light);
}

.msg-bubble.right {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-white);
}

.msg-text.brand {
  color: var(--color-white);
}
.msg-text.amber {
  color: var(--color-text);
}

.msg-meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}
.msg-time{
  color: var(--color-white);
}
/* file bubble */
.msg-bubble.file {
  background: var(--color-bg);
  border: 1px dashed var(--color-border-light);
}
.msg-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.msg-file i {
  color: var(--color-primary);
  font-size: 1rem;
}
.msg-file-name a {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.msg-file-name a:hover {
  text-decoration: underline;
}
.msg-file-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* --- input bar --- */
.message-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px solid var(--color-border-light);
  margin-top: 0.8rem;
  padding-top: 0.6rem;
}

.message-input {
  flex: 1;
  min-height: 2.4rem;
  max-height: 6rem;
  resize: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  font-size: 0.9rem;
  line-height: 1.3;
  background: var(--color-white);
  color: var(--color-text);
}

.message-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-focus);
}

.composer-attach,
.send-icon {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.composer-attach:hover,
.send-icon:hover {
  color: var(--color-accent);
  transform: scale(1.1);
}

/* --- responsive --- */
@media (max-width: 768px) {
  .chat-workroom {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .chat-workroom__body {
    padding: 1rem;
  }
  .msg-bubble {
    max-width: 85%;
  }
}


/* ==========================================================
   ✅ Milestone Tasks — clean, consistent cards
   ========================================================== */

.task-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.2rem;
}

/* Each task container */
.task-block {
  background: var(--card);
  border: 1px solid var(--color-border-light);
  border-left: 5px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
}

.task-block:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Status colors */
.task-block.active { border-left-color: var(--color-primary); }
.task-block.completed { border-left-color: var(--status-success); }
.task-block.review { border-left-color: var(--status-onhold); }
.task-block.pending { border-left-color: var(--color-border-light); }

/* Header area */
.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.task-title-line strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Edit / Assign icons */
.edit-icon {
  color: var(--color-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.edit-icon:hover {
  color: var(--color-accent);
  transform: scale(1.15);
}

.task-summary {
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Metadata lines */
.task-header small {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-muted-dark);
  margin-top: 0.2rem;
}

/* Assignees */
.assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--panel-wash);
  color: var(--color-text);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  margin-right: 0.25rem;
  margin-top: 0.15rem;
}
.chip.role {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  border-radius: 3px;
  padding: 0 0.3rem;
}
.chip.muted {
  background: var(--color-border-light);
  color: var(--color-muted);
  font-size: 0.75rem;
  border-radius: 3px;
  padding: 0 0.3rem;
}

/* Actions (files, messages, etc.) */
.task-actions {
  display: flex;
  gap: 1.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-light);
}

.task-actions .action-icon {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.05rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.task-actions .action-icon:hover {
  color: var(--color-accent);
  transform: scale(1.15);
}

/* Collapsible panels (files, activity, chat) */
.task-panel {
  margin-top: 0.5rem;
  padding: 0.8rem 1rem;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.task-panel.hidden {
  display: none;
}

/* Add button row */
.task-controls {
  text-align: center;
  margin-top: 1rem;
}
.task-controls .btn.small {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.task-controls .btn.small:hover {
  background: var(--color-primary-light);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  .task-block {
    padding: 0.9rem 1rem;
  }
  .task-actions {
    justify-content: space-around;
  }
  .assignee {
    font-size: 0.75rem;
  }
}

/* ==========================================================
   💠 Universal Workroom Modal (for edit / assign / forms)
   ========================================================== */

.workroom-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
  z-index: 1300;
  align-items: flex-start;
  justify-content: center;
  display: flex;
  padding-top: 5vh;
}

/* Core card */
.workroom-modal {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 90%;
  max-height: 90vh;
  animation: fadeInWorkroom 0.25s ease;
}

/* Size options */
.workroom-modal--sm { max-width: 420px; }
.workroom-modal--md { max-width: 600px; }
.workroom-modal--lg { max-width: 850px; }

/* Header */
.workroom-modal__header {
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
}

.workroom-modal__title {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workroom-modal__close {
  background: transparent;
  border: none;
  color: var(--color-white);
  font-size: 1.2rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.workroom-modal__close:hover {
  opacity: 0.8;
}

/* Body content */
.workroom-modal__body {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg);
  padding: 1.5rem 1.8rem;
}

.workroom-modal__body .input-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted-dark);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.workroom-modal__body .input-field {
  width: 100%;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  background: var(--color-white);
  color: var(--color-text);
  margin-bottom: 0.8rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.workroom-modal__body .input-field:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-focus);
}

/* Fade-in animation */
@keyframes fadeInWorkroom {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Responsive */
@media (max-width: 640px) {
  .workroom-modal {
    width: 95%;
    max-height: 94vh;
    border-radius: 0;
  }
  .workroom-modal__body {
    padding: 0.2rem;
  }
}

/* ==========================================================
   👥 Assign Workroom – Refined Look
   ========================================================== */

.assign-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* === Column containers === */
.assign-col {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 250px;
}

.assign-col-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.4rem;
  margin-bottom: 0.2rem;
}

/* === User rows === */
.assign-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  justify-content:space-between;
}

.assign-list-item {
  display: flex;
  align-items: center;              /* vertical alignment */
  justify-content: space-between;   /* name on left, button on right */
  gap: 0.8rem;
  background: var(--panel-wash);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.assign-list-item:hover {
  background: var(--panel-wash-2);
  transform: translateY(-1px);
}

/* === Name & Role text === */
.assign-person {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.assign-person .role {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  border-radius: 4px;
  padding: 0 0.35rem;
  font-weight: 500;
}

/* === Add / Remove button === */
.assign-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.assign-btn {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: background 0.25s ease;
}
.assign-btn:hover {
  background: var(--color-primary-light);
}

/* Disabled / already assigned state */
.assign-btn.disabled,
.assign-btn[disabled],
.assigned-label {
  background: var(--color-border-light);
  color: var(--color-muted);
  cursor: default;
}

.assigned-label {
  font-size: 0.8rem;
  font-weight: 500;
  margin-right: 0.4rem;
  color: var(--color-muted);
}

/* === Role chips / filters === */
.role-chips {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.assign-role-chip {
  background: var(--panel-wash);
  border: 1px solid var(--color-border-light);
  color: var(--color-text);
  border-radius: 8px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.assign-role-chip:hover {
  background: var(--panel-wash-2);
}
.assign-role-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* === Search box === */
.assign-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 220px;
}

.search-box input {
  flex: 1;
  border-radius: 8px;
}

/* === Responsive === */
@media (max-width: 600px) {
  .assign-columns {
    grid-template-columns: 1fr;
  }
  .assign-list-item {
    font-size: 0.85rem;
  }
}

.payment-block { text-align: right; margin-top: 1rem; }
.paid-check { color: green; font-weight: 700; }