:root {
  --brand-primary: #8e004a;
  --brand-dark: #444250;
  --brand-bg: #e0e0e0;
  --chip-bg: #ffffff;
}

* { font-family: 'Inter', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.app-header { background: #fff; }
.app-title { color: var(--brand-dark); letter-spacing: .2px; }

.link-add { color: var(--brand-primary); text-decoration: none; font-weight: 600; }
.link-add:hover { text-decoration: underline; }

.users-chips .chip{
  background: var(--chip-bg);
  border: 1px solid #eee;
  padding: .35rem .6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.users-chips .chip .dot{ width:20px; height:20px; border-radius:50%; display:inline-block; }

.planner-grid { overflow: hidden; }

.project-col { width: 300px; color: var(--brand-dark); }

.day-col {
  min-width: 150px;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--brand-dark);
}

tbody td{
  height: 64px;
  position: relative;
  background: #fff;
}
tbody tr:nth-child(odd) td{ background: #fafafa; }

tbody td.dropzone{ outline: 2px dashed rgba(142,0,74,.25); outline-offset: -4px; }

.assignment-bar{
  position: absolute;
  top: 8px;
  height: 24px;                 /* HALF height */
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .6rem;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  cursor: move;
}

.assignment-bar .handle{
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  opacity: .8;
  cursor: ew-resize;
}
.assignment-bar .handle.left{
  left: 4px;
  border-left: 3px solid rgba(255,255,255,.7);
}
.assignment-bar .handle.right{
  right: 4px;
  border-right: 3px solid rgba(255,255,255,.7);
}

.btn-delete{
  position: absolute;
  top: 7px;                     /* tighter for shorter bar */
  right: 	15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #000;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.btn-delete:hover{ background:#ffeaea; }

.project-name{ font-weight:600; color: var(--brand-dark); }
.muted-date{ color:#777; font-weight:600; }

.table thead th.day-col{ border-bottom: 2px solid var(--brand-bg); }

#plannerTable td{
  height: 64px; position: relative; background: #fff;
  border-right: 1px solid #e7e7e7;
}
#plannerTable td:last-child{ border-right: 0; }

#plannerTable tbody tr td{ border-top: 8px solid #f5f5f5; }
#plannerTable tbody tr:nth-child(odd) td{ background: #fbfbfb; }

.dropzoneCell{ outline-offset: -4px; }
.drop-active{ outline: 2px dashed rgba(142,0,74,.35); }
.drop-accept{ background: #f7eef3 !important; }

/* Disable text selection only while dragging */
body.dragging, body.dragging *{
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.drag-ghost{
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  transform: translate(-9999px,-9999px);
  height: 40px;
  min-width: 120px;
  padding: 0 .6rem;
  border-radius: 10px;
  display: flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 700;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  pointer-events: none;
}

/* Ensure absolute-positioned bars use the table wrapper as their origin */
.planner-grid .table-responsive{
  position: relative;
}

/* When dragging a user chip, let cells receive the drop even if bars are above */
body.dragging .assignment-bar{
  pointer-events: none;
}

/* Make bars half height (24px instead of 48px) */
.assignment-bar {
    height: 24px;
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 0 .4rem;
    line-height: 1; /* tighter text */
}

/* Reduce vertical spacing between stacked bars */
.assignment-bar {
    margin-top: 2px; /* slight breathing room */
}

/* Ensure vertical stacking uses smaller spacing */
.assignment-bar + .assignment-bar {
    margin-top: 4px !important; /* smaller gap between stacked bars */
}

/* Username text: white, no background */
.assignment-bar span {
    color: #fff;
    background: none !important;
    padding: 0;
    margin: 0;
    box-shadow: none;
}
/* Bar size + layout */
.assignment-bar{
  height: 30px;                 /* half-height feeling */
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 18px;       /* extra left padding so label clears left handle */
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
  cursor: move;
}

/* Label: white text, no pill background */
.assignment-bar span{
  color:#fff;
  background: none !important;
  padding: 0;
  margin: 0;
  box-shadow: none;
  line-height: 1;
}

/* Handles are thinner and tucked closer to the edges */
.assignment-bar .handle{
  position:absolute;
  top:0;
  width:6px;
  height:100%;
  opacity:.75;
  cursor:ew-resize;
}
.assignment-bar .handle.left{  left:2px;  border-left: 2px solid rgba(255,255,255,.65); }
.assignment-bar .handle.right{ right:2px; border-right:2px solid rgba(255,255,255,.65); }

/* While dragging a chip, let bars be “click-through” so you can drop on the cells */
/* when dragging a user chip, make sure bars don't block the cells */
body.dragging .assignment-bar { pointer-events: none !important; 
}

/* while dragging a chip, bars won’t block drops */
body.dragging .assignment-bar { pointer-events: none; }

/* label spacing inside a bar */
.assignment-bar .bar-label {
  margin-left: 14px;   /* clears left handle */
  margin-right: 14px;  /* clears right handle */
  color: #fff;
}

/* white fade overlay from 50% to the top */
.assignment-bar.has-top-fade::before {
  content: "";
  position: absolute;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
  border-radius: inherit;     /* matches the bar's rounded corners */
  pointer-events: none;       /* does not block drag/resize/delete */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.5) 100%
  );
}

.btn-add {
  background-color: #8e004a;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease-in-out;
}

.btn-add:hover,
.btn-add:focus {
  background-color: #a30057; /* slightly lighter shade on hover */
  color: #fff;
}