/* Main Container */
.agilepath-roadmap-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 20px;
    padding: 10px;
    /* justify-content: space-between; */
    align-items: flex-start;
}

/* Stage Column */
.agilepath-stage {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 300px; /* Each column has a fixed width, adjust as needed */
    max-width: 300px;
	min-height: 300px;
    background-color: #fff;
    border: 1px solid #00000020;
    border-radius: 8px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
}

/* Stage Header (Section 5.3) */
.agilepath-stage-header {
	position: relative;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
    background-color: #e9ecef;
    color: #212529;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.agilepath-stage-icon {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
}

.agilepath-stage-title {
    margin: 0 0 4px 0;
    font-size: 1.15em;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
}

h3.agilepath-stage-title {
    margin-bottom: 0 !important;
	color: #fff;
	font-size: 16px;
}

.agilepath-stage-header-main-info {
	display: flex;
    justify-content: space-between; /* Pushes title/icon left, info icon right */
    align-items: center;
    width: 100%;
	color: #fff;
    padding: 15px;
	border-radius: 8px 8px 0 0;
    /* border-bottom: 1px solid #f9f9f9; */
}

.agilepath-stage-description {
    font-size: 1.0em;
    color: #fff;
    margin: 10px 12px 0 12px;
    line-height: 1.4;
}

/* Stage Items Area */
.agilepath-stage-items {
	padding: 10px;
    min-height: 200px;
    flex-grow: 1;
	padding-bottom: 0;
}

/* Individual Roadmap Item Box (Section 5.3) */
.agilepath-item-box {
	position: relative;
	background-color: #e5e5f340;
    border: 1px solid #dcdcde;
	/*border: 1px solid #ced4da; */
    padding: 10px 12px 0px 12px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.agilepath-item-title {
    margin: 0 0 8px 0;
    font-size: 1.05em;
    font-weight: 500;
    color: #0073aa; /* WordPress link blue for titles */
}
.agilepath-item-title a { /* If titles become links to single item pages */
    text-decoration: none;
    color: inherit;
}

.agilepath-item-description,
.agilepath-item-excerpt {
    font-size: 0.9em;
    color: #343a40;
    line-height: 1.5;
    margin-bottom: 10px;
}

.agilepath-stage-info-icon-public {
    font-size: 18px;
    color: rgba(255,255,255,0.8); /* Assuming white text theme from header */
    cursor: pointer;
    /* padding: 5px; Clickable area */
    margin-left: 5px; /* Space from title group if they are close */
}
.agilepath-stage-info-icon-public:hover {
    color: #ffffff;
}
.agilepath-stage-info-icon-public.active {
    /* Optional: style for when popup is open, e.g., different color if needed */
    /* color: #f0f0f0; */
}

/* Public Stage Description Popup Styling */
.agilepath-stage-description-popup.public {
    display: none; /* Initially hidden - JS will toggle this */
    position: absolute;
    top: calc(100% + 5px); /* Position below the header with a small gap */
    left: 20px; 
    right: 10px; 
    /* width: calc(100% - 20px); /* Take up most of the column width, adjust as needed */
    max-width: 260px; /* Or a fixed max-width */
    background-color: #ffffff; /* Light background for popup */
    color: #333333; /* Dark text on light popup */
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10; /* Ensure it's above items list */
    font-size: 0.88em; /* Slightly smaller than main content */
    line-height: 1.5;
    text-shadow: none; /* Reset text-shadow from header if inherited */
}
/* Ensure the old direct p.agilepath-stage-description is hidden if it exists */
.agilepath-stage-header > p.agilepath-stage-description {
    display: none;
}

/* Voting Area (Section 4.5, 5.3) */
.agilepath-item-vote-area {
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px dashed #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}

.agilepath-vote-count {
    color: #00315a;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}

.agilepath-vote-button {
    background-color: #0073aa; /* WordPress primary button blue */
    color: #ffffff;
    border: 1px solid #006799;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease-in-out;
}
.agilepath-vote-button:hover {
    background-color: #005a87;
}
.agilepath-vote-button.voted,
.agilepath-vote-button:disabled {
    background-color: #6c757d; /* Grey out if voted or disabled */
    border-color: #5a6268;
    cursor: not-allowed;
    opacity: 0.8;
}
.agilepath-vote-button .spinner { /* If you add a spinner */
    display: inline-block;
    visibility: hidden;
    margin-left: 5px;
    vertical-align: middle;
}
.agilepath-vote-button.loading .spinner {
    visibility: visible;
}

.agilepath-login-to-vote {
    font-size: 0.85em;
    color: #50575e;
	margin-bottom: 0 !important;
}

p.agilepath-login-to-vote {
	margin-bottom: 0 !important;
}

.agilepath-login-to-vote a {
    color: #0073aa;
    text-decoration: underline;
}

.agilepath-no-items {
    color: #6c757d;
    font-style: italic;
    text-align: center;
    padding: 15px 0;
}

/* Responsive adjustments - very basic example */
@media (max-width: 768px) {
    .agilepath-roadmap-container {
        /* Could switch to vertical stacking on very small screens if desired,
           but horizontal scroll is often preferred for Kanban boards. */
    }
    .agilepath-stage {
        flex: 0 0 300px; /* Slightly narrower columns on smaller screens */
        max-width: 300px;
    }
}

h4.agilepath-item-title {
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    gap: 10px;
    color: blueviolet;
	margin-bottom: 10px;
	color: #5c5c5c;
	cursor: pointer;
}

h4.agilepath-item-title.agilepath-item-accordion-trigger-title {
	color: #5c5c5c;
}

.agilepath-item-title.agilepath-item-accordion-trigger-title .agilepath-accordion-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #777;
    transition: transform 0.2s ease-in-out;
}

.agilepath-item-title.agilepath-item-accordion-trigger-title.active .agilepath-accordion-icon {
    transform: translateY(-50%) rotate(180deg); /* Rotate arrow when active/open */
}

.agilepath-item-title.active .agilepath-accordion-icon { /* Title gets 'active' class from JS */
    transform: translateY(-50%) rotate(180deg);
}

.agilepath-item-summary {
    /* Styles for the initially visible summary/excerpt */
    font-size: 0.9em;
    color:#5c5c5c;
    line-height: 1.5;
    margin-bottom: 10px; /* Keep margin if full content is hidden */
	cursor: pointer;
}

.agilepath-item-full-content {
    /* Initially hidden by inline style or this class */
    /* display: none; */ 
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #eee; /* Separator */
    font-size: 0.95em; /* Slightly larger for full content */
    line-height: 1.6;
}

/* Ensure embedded content in full view looks okay */
.agilepath-item-full-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}
.agilepath-item-full-content p {
    margin-bottom: 10px;
	color: #5c5c5c;
	font-size: 0.9em;
}
.agilepath-item-full-content ul,
.agilepath-item-full-content ol {
    margin-left: 20px;
    margin-bottom: 1em;
}

/* Adjust vote area margin if summary is very short and content is hidden */
.agilepath-item-box:not(.accordion-open) .agilepath-item-summary + .agilepath-item-vote-area {
    margin-top: 0; /* Or adjust as needed */
}
.agilepath-item-box.accordion-open .agilepath-item-full-content + .agilepath-item-vote-area {
    margin-top: 15px;
}

/* ... (existing public styles) ... */

/* Item Label Bars on Public Frontend (Summary View) */
.agilepath-item-label-bars-container.public {
    margin-bottom: 6px; 
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* Small space between bars */
}

/* Shared style for .agilepath-item-label-bar if not already present from admin section */
.agilepath-item-label-bar { 
    display: inline-block;
    width: 30px;  /* You can adjust width/height for frontend if needed */
    height: 6px; 
    border-radius: 3px;
    /* background-color is set inline by PHP */
}

/* Full Item Labels on Public Frontend (Expanded View) */
.agilepath-item-labels-full-container.public {
    margin-bottom: 10px; /* Space below labels, before full content description */
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Gap between full label pills */
}

/* Shared style for .agilepath-item-label if not already present from admin or ensure it's distinct */
.agilepath-item-label { 
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4; 
    /* background-color and text color are set inline by PHP */
}

/* Ensure full content area provides space for labels if they are first */
.agilepath-item-full-content .agilepath-item-labels-full-container.public {
    /* This might be the first child, so margin-top: 0 might be good if it has it */
    margin-top: 0; /* Or adjust as needed */
    margin-bottom: 12px; /* Space after the labels, before main post content */
}


/* Check */
/* Make the entire item box the clickable trigger for accordion if it has the class */
.agilepath-item-box.agilepath-item-accordion-trigger {
    cursor: pointer;
}

/* Title no longer needs cursor pointer if the box is the trigger, but keep styles for arrow */
.agilepath-item-title { 
    position: relative; 
    padding-right: 10px; 
}

.agilepath-item-title .agilepath-accordion-icon {
    position: absolute;
    right: 0; /* Adjust if padding on title affects this */
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px; /* Or your preferred size */
    color: #777;    /* Or your preferred color */
    transition: transform 0.2s ease-in-out;
}

/* This rule rotates the icon when the title H4 has the 'active' class */
.agilepath-item-title.active .agilepath-accordion-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* Make your main trigger div look clickable */
.agilepath-item-accordion-trigger {
    cursor: pointer;
}

/* Ensure summary (which contains label bars and excerpt) has appropriate styling */
.agilepath-item-summary {
    /* Add any specific styling if needed, e.g., slight padding if it feels too close to title */
    /* margin-top: 5px; */ /* Or control spacing with title's margin-bottom */
}

.agilepath-item-summary .agilepath-item-label-bars-container.public {
    margin-top: 4px; /* Space below title if title is outside summary */
    margin-bottom: 8px; /* Space above excerpt text */
}

/* AgilePath Public Styles - Comment Section */
/* Remove any styles for .agilepath-comments-list if they were previously added for in-accordion display */

/* Overall container for everything related to comments in an expanded item */
.agilepath-item-full-content .agilepath-item-comments-section {
    margin-top: 0;  /* Space above the comment section within expanded item */
    padding-top: 0; /* Space above the HR line */
}

/* Separator line above comments */
hr.agilepath-comments-hr {
    border: 0;
    height: 1px;
    background-color: #e9ecef; /* Light separator line */
    margin: 15px 0 10px 0;
}

/* "View full item & all discussion" link */
.agilepath-view-full-item-link-container {
    margin-bottom: 5px;
    font-size: 0.9em;
    text-align: left; 
}
.agilepath-view-full-item-link {
    text-decoration: none;
    color: #0073aa;
    display: inline-flex;
    align-items: center;
}
.agilepath-view-full-item-link:hover {
    text-decoration: underline;
}
.agilepath-view-full-item-link .dashicons {
    text-decoration: none;
    font-size: 1.1em; /* Slightly larger than link text */
    margin-left: 4px;
    line-height: 1; /* Align better */
}

/* Main wrapper for the two-state comment form */
.agilepath-comment-form-interactive-wrapper {
    margin-top: 15px; /* Space above the form area */
}

/* State 1: Placeholder Area (Avatar + "Write a comment..." input-like div) */
.agilepath-comment-placeholder-wrapper {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between avatar and placeholder input */
    margin-bottom: 15px; /* Space below if nothing else follows */
}

.agilepath-comment-avatar img { /* Applies to avatar in both states */
    border-radius: 50%;
    max-width: 36px; /* Consistent small avatar */
    height: auto;
    display: block; /* Prevents extra space under img */
}

.agilepath-comment-placeholder-input {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 20px; /* Pill shape like your "Before comment.png" */
    background-color: #f7f7f7; /* Slightly off-white, or #fff */
    color: #555d66; /* Placeholder text color */
    cursor: text;
    line-height: 1.5; /* For vertical centering of text if needed */
    font-size: 0.95em;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.agilepath-comment-placeholder-input:hover,
.agilepath-comment-placeholder-input:focus { /* Focus via tabindex */
    border-color: #007cba;
    outline: none; /* Remove default browser outline */
}

/* State 2: Actual Input Area (Avatar + Textarea + Buttons) - Initially hidden by JS/inline style */
.agilepath-comment-input-area {
    /* display: none; /* Handled by inline style initially, then by JS */
    /* padding: 10px;
    background-color: #fdfdfd;
    border: 1px solid #e5e5e5;
    border-radius: 4px; */
}

.agilepath-comment-form-textarea-wrapper { /* Wrapper for avatar and textarea in expanded state */
    display: flex;
    align-items: flex-start; /* Avatar top-aligned with textarea */
    gap: 12px; 
  /*  margin-bottom: 12px; */
}

.comment-form-comment { /* WordPress default <p> tag around textarea */
    margin: 0; 
    flex-grow: 1; 
}

textarea.agilepath-comment-actual-textarea { /* The actual textarea */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 3px;
    font-size: 0.95em;
    line-height: 1.6;
    min-height: 80px; /* Adjust as needed for initial expanded size */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    resize: vertical; /* Allow vertical resize */
}
textarea.agilepath-comment-actual-textarea:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: 1px solid transparent;
}

/* Submit button area within the form */
.comment-form .form-submit { 
    /* margin: 10px 0 0 0; */
    padding: 0;
    text-align: right; 
    display: flex; /* For aligning buttons */
    justify-content: flex-end;
    gap: 8px; /* Space between Post and Cancel buttons */
}

.agilepath-comment-submit.button.button-primary,
.agilepath-comment-cancel.button.button-secondary {
    font-size: 13px !important; 
    line-height: normal !important; /* Override WP defaults if they are too tall */
    padding: 6px 12px !important; /* More standard small button padding */
    height: auto !important;
    min-height: 30px;
}
.agilepath-comment-cancel.button.button-secondary {
    /* Specific styles for cancel if different from theme's .button-secondary */
    background: #f7f7f7;
    border-color: #ccc;
    color: #555;
    box-shadow: none;
}
.agilepath-comment-cancel.button.button-secondary:hover {
    background: #f0f0f0;
    border-color: #bbb;
    color: #333;
}


/* "You must be logged in..." message */
.must-log-in { 
    padding: 10px 15px;
    background-color: #fff8e1;
    border: 1px solid #ffe59c;
    border-radius: 3px;
    font-size: 0.9em;
    color: #594f3a;
    margin-top: 15px; /* Space if it shows instead of form */
}
.must-log-in a {
    color: #c08800;
    text-decoration: underline;
}

/* Comments closed message */
.agilepath-comments-closed {
    font-style: italic;
    color: #777;
    /* padding: 10px 0; */
    margin-top: 15px;
}

/* --- End Interactive Comment Section Styling --- */