/* Scoped styles: the existing dashboard and server controls stay untouched. */
.projects-page { --project-accent: #ac8bf6; --project-wash: #9d70ff12; }
.projects-page[data-accent="cyan"] { --project-accent: #61d9e7; --project-wash: #54cadd12; }
.projects-page[data-accent="green"] { --project-accent: #68dfac; --project-wash: #54d89a12; }
.projects-tools, .projects-board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; }
.projects-picker, .projects-search { display: grid; gap: 7px; color: #92a7ba; font-size: 11px; margin: 0; }
.projects-picker { width: min(380px, 100%); }
.projects-search { width: min(320px, 100%); }
.projects-picker select, .projects-search input { width: 100%; min-width: 0; }
.projects-page select, .projects-dialog select { color: #dce8f5; background: #0b131d; border: 1px solid #2c3a4b; border-radius: 7px; padding: 10px 12px; font: inherit; }
.projects-page select:focus-visible, .projects-dialog select:focus-visible, .projects-dialog textarea:focus-visible { outline: 2px solid var(--project-accent, #ac8bf6); outline-offset: 2px; }
.projects-tools .check, .projects-board-tools .check { margin: 0; }
.projects-message { color: #95acbc; line-height: 1.6; }
.projects-tools .check, .projects-board-tools .check { max-width:100%; white-space:normal; line-height:1.6; }
.projects-tools .check input, .projects-board-tools .check input { flex-shrink:0; }
.projects-message:empty { display: none; }
.projects-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; margin-bottom: 20px; border: 1px solid #293645; border-radius: 14px; background: radial-gradient(ellipse at 0 0, var(--project-wash), transparent 80%), #10171f; }
.projects-overview > div { min-width: 0; }
.projects-overview h3 { margin: 12px 0 8px; font-size: 23px; overflow-wrap: anywhere; }
.projects-overview p { max-width: 680px; margin: 0; color: #99aabb; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.projects-overview .badge { color: var(--project-accent); background: var(--project-wash); }
.projects-board-tools > span { margin-left: auto; font-size: 11px; color: #91a4b6; }
.projects-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.projects-column { min-width: 0; padding: 12px; min-height: 260px; background: #0c121acc; border: 1px solid #202d3a; border-radius: 12px; }
.projects-column-heading { display: flex; align-items: center; gap: 8px; margin: 4px 2px 17px; }
.projects-column-heading h4 { flex: 1; margin: 0; font-size: 12px; font-weight: 600; }
.projects-column-heading > span:last-child { font-size: 10px; color: #8ba0b2; background: #17232e; border-radius: 5px; padding: 3px 6px; }
.projects-stage-dot { width: 7px; height: 7px; border-radius: 50%; background: #8497ab; }
.projects-stage-dot.doing { background: #ab8ef3; }
.projects-stage-dot.review { background: #69cadd; }
.projects-stage-dot.done { background: #63daa7; }
.projects-column-body { display: grid; gap: 10px; }
.projects-column-empty { color: #536b80; text-align: center; font-size: 11px; padding: 35px 0; }
.projects-card { min-width: 0; padding: 14px; background: linear-gradient(135deg, var(--project-wash), transparent 80%), #121c27; border: 1px solid #2b3848; border-radius: 10px; transition: border-color .15s; }
.projects-card:hover { border-color: #506079; }
.projects-card[draggable="true"] { cursor: grab; }
.projects-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.projects-priority { font-size: 9px; color: #9cacc0; background: #ffffff08; border-radius: 5px; padding: 4px 6px; }
.projects-priority.important { color: #ddc082; background: #cfa65712; }
.projects-priority.urgent { color: #e59ba9; background: #d77b9312; }
.projects-card-number { color: #577189; font-size: 10px; }
.projects-card-title { text-align: left; color: #dfebf7; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.6; padding: 0; border: 0; background: none; cursor: pointer; overflow-wrap: anywhere; width: 100%; }
.projects-card-title:focus-visible { outline: 2px solid var(--project-accent); outline-offset: 4px; border-radius: 2px; }
.projects-card-description { margin: 8px 0 14px; font-size: 11px; color: #90a2b8; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.projects-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; color: #81a2b8; font-size: 10px; }
.projects-card-meta .overdue { color: #e79bab; }
.projects-move-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 0; font-size: 9px; color: #70879d; border-top: 1px solid #ffffff08; padding-top: 10px; }
.projects-move-label select { min-width: 0; max-width: 130px; padding: 5px 6px; font-size: 10px; }
.projects-dialog { width: min(560px, calc(100% - 24px)); }
.projects-dialog textarea { resize: vertical; width: 100%; min-width: 0; padding: 10px; font: inherit; line-height: 1.6; background: #0a1119; color: #e2eaf2; border: 1px solid #2a3848; border-radius: 7px; }
.projects-dialog fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.projects-dialog fieldset:disabled { opacity: .8; }
.projects-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.projects-form-grid > label { min-width: 0; }
.projects-form-grid input, .projects-form-grid select { min-width: 0; width: 100%; }
.projects-hint { color: #89a0b6; font-size: 11px; line-height: 1.7; }
.projects-form-error { color: #e89bac; font-size: 12px; line-height: 1.7; }
.projects-form-error:empty { display: none; }
.projects-member-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; padding: 13px 0; border-bottom: 1px solid #263340; }
.projects-member-row > span { min-width: 0; overflow-wrap: anywhere; }
.projects-member-row small { display: block; margin-top: 5px; font-size: 10px; color: #c0a278; line-height: 1.5; }
.projects-member-row select { max-width: 155px; min-width: 125px; }
@media (max-width: 1200px) { .projects-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .projects-overview { flex-direction: column; align-items: stretch; padding: 18px; }
  .projects-overview .actions, .projects-page .page-heading .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .projects-overview .actions .button, .projects-page .page-heading .button { min-width: 0; min-height: 42px; padding: 8px; white-space: normal; }
  .projects-overview .actions .primary { grid-column: 1 / -1; }
  .projects-board { grid-template-columns: minmax(0, 1fr); }
  .projects-column { min-height: 0; }
  .projects-column-empty { padding: 8px 0; }
  .projects-picker, .projects-search { width: 100%; }
  .projects-board-tools > span { margin-left: 0; width: 100%; }
  .projects-move-label select { min-height: 36px; max-width: 160px; }
  .projects-card-title { min-height: 36px; }
  .projects-member-row { flex-direction: column; align-items: stretch; }
  .projects-member-row select { width: 100%; max-width: none; }
  .projects-dialog .actions { display: grid; grid-template-columns: 1fr 1fr; }
}