/* Wrapper */
.timeline-box{
  max-width:1200px;
  margin:30px auto;
  background:#fff;
  border-radius:18px;
  border:1px solid #e6e8ec;
  overflow:hidden;
}

/* Header */
.timeline-header{
  padding:16px 20px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #eee;
  margin-bottom: 0;
}

/* Common rows */
.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
/*  border-bottom:1px solid #eee;*/
  text-align:center;
}

/* Months */
.months{
  background:#fafafa;
  font-size:13px;
  font-weight:600;
}
.month{
  padding:12px 0;
  border-right:1px solid #eee;
}

/* Sprints */
.sprints{
  font-size:12px;
}
.sprints div{
  /* grid-column:span 2; */
  padding:10px 4px;
  border-right:1px solid #eee;
}
.sprints small{
  display:block;
  font-size:10px;
  color:#888;
}

/* Weeks */
.weeks{
  font-size:11px;
  color:#9aa0a6;
}
.weeks div{
  padding:8px 0;
  border-right:1px solid #f0f0f0;
}

/* Grid */
.timeline-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:90px;
  padding:0;
  position:relative;
  overflow: auto;
}

/* Task cards */
.task{
  position: absolute;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-size:12.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
  height: 40px;
  color: #33322F;
}

/* Colors */
/*.red{border-top:3px solid #e74c3c}
.orange{border-top:3px solid #f39c12}
.yellow{border-top:3px solid #f1c40f}
.green{border-top:3px solid #7cb342}
.blue{border-top:3px solid #5dade2}
.indigo{border-top:3px solid #4f6bd8}
.purple{border-top:3px solid #a569bd}*/

/* Milestone */
.milestone .dot{
  position:absolute;
  right: 40px;
  bottom:-10px;
  width:6px;
  height:6px;
  background:#888;
  border-radius:50%;
}
.milestone .dot::after{
  content:"";
  position:absolute;
  top:6px;
  left:2px;
  height:55px;
  border-left:2px dotted #aaa;
}
.milestone .label{
  position:absolute;
  bottom:-80px;
  right: 15px;
  font-size:10px;
  color:#777;
}

.month {
    position: static;
}

/*split css*/

/* Overlay */
#sprintOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9998;
}
#sprintOverlay.active {
    opacity: 1;
    visibility: visible;
}

/* Panel */
/* Panel – RIGHT SLIDE */
#addSprintPanel {
    position: fixed;
    top: 0;
    right: -420px;      /* start hidden on right */
    left: auto;
    width: 420px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15);
    transition: 0.4s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

/* Active state */
#addSprintPanel.active {
    right: 0;
}

/* Header */
.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-panel {
    cursor: pointer;
    font-size: 18px;
}

/* Body */
.panel-body {
    padding: 20px;
    flex: 1;
}

.panel-body label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: #555;
}

.panel-body input,
.panel-body select {
    width: 100%;
    padding: 10px;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Date Row */
.date-row {
    display: flex;
    gap: 10px;
}

/* Footer */
.panel-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cancel {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
}

.btn-submit {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
}

.add-task-link {
    color: #2563eb;
    font-size: 13px;
    cursor: pointer;
}


/*create project page */

 /* SECTION BLOCK */
.section-block {
    margin-bottom: 30px;
}

.section-block label {
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

/* ITEM BOX */
.dynamic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    position: relative;
}

/* Drag Icon */
.drag-icon {
    cursor: move;
    opacity: 0.5;
}

/* Remove button */
.remove-btn {
    margin-left: auto;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.6;
}

.remove-btn:hover {
    opacity: 1;
}

/* Expected Outcome (Blue) */
.outcome-item {
    border: 1px solid #3b82f6;
    background: #f0f6ff;
}

/* Risk (Red) */
.risk-item {
    border: 1px solid #ef4444;
    background: #fff1f1;
}

/* Decision (Orange) */
.decision-item {
    border: 1px solid #f97316;
    background: #fff7ed;
}

/* Add Button Box */
.dashed-box {
    border: 2px dashed #d1d5db;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
}

.dashed-box:hover {
    background: #f9fafb;
}

.dashed-box.blue { border-color: #3b82f6; color: #3b82f6; }
.dashed-box.red { border-color: #ef4444; color: #ef4444; }
.dashed-box.orange { border-color: #f97316; color: #f97316; }


/*.dashboard-wrapper.milestone-create {
    display: none;
}*/

.dashboard-wrapper.project-create,
.dashboard-wrapper.milestone-create {
    transition: all 0.3s ease;
}

/* Initial visibility */
.dashboard-wrapper.project-create { display: flex; }
.dashboard-wrapper.milestone-create { display: none; }

/* Classes for JS toggling */
.dashboard-wrapper.hidden { display: none !important; }
.dashboard-wrapper.visible { display: flex !important; }



.sprint-card{
border:1px solid #e5e7eb;
border-radius:10px;
padding:15px;
margin-bottom:15px;
background:#fff;
}

.sprint-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.status-badge{
background:#f3f4f6;
padding:4px 10px;
border-radius:20px;
font-size:12px;
}

.sprint-task{
background:#f9fafb;
padding:10px;
border-radius:6px;
margin-bottom:8px;
}

.add-task-inline{
color:#2563eb;
cursor:pointer;
font-size:14px;
}


/*timeline preview section*/


/* Wrapper */
.timeline-box{
  max-width:1200px;
  margin:30px auto;
  background:#fff;
  border-radius:18px;
  border:1px solid #e6e8ec;
  overflow:hidden;
}

/* Header */
.timeline-header{
  padding:16px 20px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #eee;
}

/* Common rows */
.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  border-bottom:1px solid #eee;
  text-align:center;
}

/* Months */
.months{
  background:#fafafa;
  font-size:13px;
  font-weight:600;
}
.month{
  padding:12px 0;
  border-right:1px solid #eee;
}

/* Sprints */
.sprints{
  font-size:12px;
}
.sprints div{
  /* grid-column:span 2; */
  padding:10px 4px;
  border-right:1px solid #eee;
}
.sprints small{
  display:block;
  font-size:10px;
  color:#888;
}

/* Weeks */
.weeks{
  font-size:11px;
  color:#9aa0a6;
}
.weeks div{
  padding:8px 0;
  border-right:1px solid #f0f0f0;
}

/* Grid */
/* .timeline-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:90px;
  padding:20px 12px 60px;
  position:relative;
} */

/* Task cards */
/* .task{
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-size:12.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
  position:relative;
} */

/* Colors */
/*.red{border-top:3px solid #e74c3c}
.orange{border-top:3px solid #f39c12}
.yellow{border-top:3px solid #f1c40f}
.green{border-top:3px solid #7cb342}
.blue{border-top:3px solid #5dade2}
.indigo{border-top:3px solid #4f6bd8}
.purple{border-top:3px solid #a569bd}*/

/* Milestone */
.milestone .dot{
  position:absolute;
  right:14px;
  bottom:-10px;
  width:6px;
  height:6px;
  background:#888;
  border-radius:50%;
}
.milestone .dot::after{
  content:"";
  position:absolute;
  top:6px;
  left:2px;
  height:55px;
  border-left:2px dotted #aaa;
}
.milestone .label{
  position:absolute;
  bottom:-55px;
  right:-8px;
  font-size:10px;
  color:#777;
}

.month {
    position: static !important;
}


/*ceo dashboard css*/

span#drawerProjectTitle {
    font-size: 22px;
}

.drawer-section h3 {
    font-size: 18px;
}

.bottom-box h4 {
    font-size: 18px;
}