@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap');

/* --- Main Header --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background-color: var(--brand-white);
    border-bottom: 1px solid #e2e8f0;
    margin: -1rem -1rem 0.5rem -1rem; /* Pull header to the edges, counteracting body margin */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-variant: all-petite-caps;
}
.workspace-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--brand-bg-light);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
}

.logo {
    height: 30px;
}

.agent-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-accent-orange);
    font-size: 1.1rem;
    text-transform: uppercase;
}

.agent-name-button {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-accent-orange);
    font-size: 1.1rem;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: auto;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-container {
    position: relative;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.menu-toggle:hover { transform: none; } /* Override general button hover */

.hamburger-bar { display: block; width: 24px; height: 3px; background-color: var(--brand-dark-gray); border-radius: 3px; transition: all 0.3s ease-in-out; }

.dropdown-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0; background-color: var(--brand-white); border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); min-width: 160px; z-index: 100; overflow: hidden; }
.dropdown-menu.show { display: block; }
.dropdown-menu a { color: var(--brand-text-muted); padding: 12px 16px; text-decoration: none; display: block; font-size: 0.95rem; }
.dropdown-menu a { color: var(--brand-text-muted); padding: 12px 16px; text-decoration: none; display: block; font-size: 0.95rem; font-variant: small-caps;}

.dropdown-menu hr {
    border: none;
    height: 1px;
    background-color: var(--brand-bg-light); /* Use a light background color */
    margin: 0.5rem 0; /* Add some spacing around the line */
    color: var(--brand-text-muted)
}

.form-actions a:hover { background-color: var(--brand-bg-light); }

/* --- App Layout --- */
.app-layout {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 4rem); /* Default height for split-pane layouts */
}

/* --- Breadcrumb Navigation --- */
.breadcrumb {
    margin-bottom: 1.5rem; /* Default spacing for standalone breadcrumbs */
    font-size: 0.9rem;
    color: var(--brand-text-muted);
}
.breadcrumb a {
    color: var(--brand-accent-orange);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .breadcrumb-separator {
    margin: 0 0.5rem;
}
.breadcrumb span:not(.breadcrumb-separator) {
    font-weight: 500;
    color: var(--brand-dark-gray);
}

#note-list-pane,
#task-list-pane,
#project-list-pane,
#asset-list-pane {
    width: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-bg-light);
    border-radius: 16px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

#note-list,
#task-list,
#project-list,
#asset-list {
    overflow-y: auto;
    flex-grow: 1;
}

.mobile-back-button-wrapper {
    display: none;
}

:root {
    --brand-dark-blue: rgba(2, 1, 90, 1);
    --brand-dark-gray: rgb(58, 58, 58);
    --brand-text-muted: rgba(78, 87, 116, 1);
    --brand-accent-orange: rgb(255, 153, 0);
    --brand-bg-light: rgba(243, 247, 251, 1);
    --brand-white: #ffffff;
    --error-red: #e53e3e;
    --text-color-primary: var(--brand-dark-gray);
    --text-color-secondary: var(--brand-text-muted);
    --text-color-hint: var(--brand-text-muted);
    --border-color: #e2e8f0;
}

body { font-family: 'Be Vietnam Pro', sans-serif; margin: 0rem; background-color: var(--brand-bg-light); color: var(--brand-text-muted); }
h1 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--brand-dark-gray); margin: 0; }
ul { list-style: none; padding: 0; }
li { /*opacity: 85%;*/ transition: opacity 0.2s ease; background: var(--brand-white); margin-bottom: 0.75rem; padding: 1rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); transition: all 0.2s ease-in-out; border-left: 4px solid #e3e3e3; cursor: pointer; }

.note-item-content,
.task-item-content,
.project-item-content {
    flex-grow: 1;
}
.note-item-content strong,
.task-item-content strong,
.project-item-content strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
}
li:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
li.active {
    background-color: var(--brand-white);
    opacity: 100%;
    border-left-color: var(--brand-accent-orange);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.15);
}
.note-item,
.task-item,
.project-item,
.cycle-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.list-item-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: var(--brand-text-muted);
    opacity: 0.7;
}

/* CSS for the new list-pane empty state */
.list-pane-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-color-secondary);
    height: 100%;
}

.list-pane-empty i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--border-color);
}

.list-pane-empty p { font-weight: 500; margin: 0; }
.list-pane-empty small { margin-top: 0.25rem; color: var(--text-color-hint); }


/* --- List Item Meta Styles (Notes, Tasks, Projects) --- */
.note-item-meta,
.task-item-meta,
.project-item-meta,
.cycle-item-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    color: var(--brand-text-muted);
    font-size: 0.9rem;
}

.note-item-meta-date,
.task-item-meta-date,
.cycle-item-meta-date,
.project-item-meta-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* --- Assignee Avatar (Global) --- */
.assignee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.status-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.status-icon-completed { color: #166534; }
.status-icon-needs_review { color: #92400e; }
.status-icon-in_progress { color: #713f12; }
.status-icon-open { color: #0c4a6e; }
.status-icon-planned { color: #0c4a6e; }
.status-icon-note { color: #0c4a6e; } /* A consistent blue for notes */
.status-icon-active { color: #1d4ed8; }
.status-icon-archived { color: #4b5563; }
.status-icon-executable {
    color: var(--brand-accent-orange);
    opacity: 0.9; /* Make it stand out more than other muted icons */
}

/* --- List Skeleton Loader --- */
@keyframes skeleton-pulse {
  0% { background-color: #f0f4f8; }
  50% { background-color: #e2e8f0; }
  100% { background-color: #f0f4f8; }
}

.skeleton-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--brand-white);
    border-radius: 12px;
    border-left: 4px solid #e3e3e3;
}

.skeleton-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #e2e8f0;
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    flex-shrink: 0;
}

.skeleton-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-line {
    height: 1rem;
    border-radius: 4px;
    background-color: #e2e8f0;
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-line.title {
    width: 70%;
    height: 1.2rem;
}

.skeleton-line.meta {
    width: 50%;
}

/* --- Search Result Skeleton Loader --- */
.skeleton-search-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.skeleton-search-item:last-child {
    border-bottom: none;
}

.skeleton-search-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.skeleton-favicon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: #e2e8f0;
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-search-item .skeleton-line.title { width: 60%; height: 1.1rem; }
.skeleton-search-item .skeleton-line.url { width: 40%; height: 0.8rem; margin-bottom: 0.75rem; }
.skeleton-search-item .skeleton-line.snippet { width: 90%; height: 0.9rem; margin-bottom: 0.5rem; }
.skeleton-search-item .skeleton-line.snippet.short { width: 75%; }

.centered-message { text-align: center; padding: 4rem 2rem; color: var(--brand-text-muted); }

form { display: flex; flex-direction: column; gap: 0.75rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="datetime-local"], input[type="date"], select, textarea { width: 100%; box-sizing: border-box; flex-grow: 1; padding: 0.85rem 1rem; border: 1px solid #cbd5e1; border-radius: 8px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 1rem; transition: all 0.2s ease; }
textarea {min-height: 150px; resize: vertical;}
input:focus, textarea:focus { outline: none; border-color: var(--brand-accent-orange); box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2); }
/*button { padding: 0.3rem 0.4rem; border: none; border-radius: 8px; cursor: pointer; font-weight: 400; font-family: 'Be Vietnam Pro', sans-serif; transition: transform 0.2s ease, box-shadow 0.2s ease; }*/
button {
    padding: 0.5rem 1rem; /* Increased padding for better usability */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500; /* Slightly bolder for better readability */
    font-family: 'Be Vietnam Pro', sans-serif;
    transition: all 0.2s ease-in-out;
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content (text or spinner) */
    justify-content: center; /* Horizontally center content */
    min-height: 38px; /* A consistent height to prevent layout shifts */
    box-sizing: border-box;
}
/* Disable hover effect for menu toggle which has its own */
button:not(.menu-toggle):hover { transform: translateY(-2px); }
button.primary { background-color: var(--brand-accent-orange); color: var(--brand-white); }
button.primary:hover { box-shadow: 0 10px 20px rgba(58, 58, 58, 0.2); }
button.secondary { background-color: #6c757d; color: #e3e3e3; }
button.secondary:hover { background-color: #5a6268; }
button.danger { background-color: #6c757d; color: #e3e3e3; }
button.danger:hover { background-color: #c53030; color: var(--brand-white); }

/* --- AI Action Button Glow --- */
@keyframes ai-glow {
  0% {
    /* A subtle, warm glow matching the brand's accent color */
    box-shadow: 0 0 8px 0px rgba(255, 153, 0, 0.5);
  }
  70% {
    /* A slightly more intense pulse to draw the eye */
    box-shadow: 0 0 16px 3px rgba(255, 153, 0, 0.7);
  }
  100% {
    /* Return to the base glow state */
    box-shadow: 0 0 8px 0px rgba(255, 153, 0, 0.5);
  }
}
.ai-action-button {
  /* A slower, more gentle pulse to feel more like a "breath" */
  animation: ai-glow 2.5s ease-in-out infinite;
}
.note-actions { display: flex; gap: 0.5rem; }
.task-actions { display: flex; gap: 0.5rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }

.edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.edit-header .form-actions {
    margin-top: 0;
    flex-shrink: 0;
}
 
/* Form Groups for better structure in edit forms */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* --- Edit and Detail Panes --- */
 
/* Line number for edit form */
.CodeMirror-linenumber {
    color: #6c757d;
    opacity: 65%;
    font-size:13px;
    font-family: 'FontAwesome';
}

/* Ensure both detail and edit views fill the pane */
.note-detail-wrapper,
.task-detail-wrapper,
.project-detail-wrapper,
.note-edit-form,
.task-edit-form,
.project-edit-form,
.edit-form { /* For projects.html */
    display: flex;
    flex-direction: column;
    height: 100%;
    width:100%;
    margin-bottom: 0; /* Override default form margin */
    box-sizing: border-box;
}
 
/* Specific to Detail View */
.note-detail-wrapper .detail-content,
.task-detail-wrapper .detail-content {
    flex-grow: 1; /* Allow the content area to expand */
    overflow-y: auto; /* Add scroll for long content */
}
 
/* The form-fields div needs to be a flex container to make the editor grow */
.note-edit-form .form-fields,
.task-edit-form .form-fields {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Important for flex-grow in a scrolling container */
}
/* Specific to Edit View */
.note-edit-form .EasyMDE-container {
    flex-grow: 1; /* Make the editor container grow */
    display: flex;
    flex-direction: column;
}
.note-edit-form .CodeMirror {
    flex-grow: 1; /* Make the CodeMirror instance grow */
}
/* Override the global flex-grow for text inputs inside the edit form */
.note-edit-form .form-fields input[type="text"],
.task-edit-form .form-fields input[type="text"] {
    flex-grow: 0;
}

.modal-title-input {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-dark-gray);
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 1rem;
}
/* Toolbar for AI/content actions above the editor */
.editor-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem; /* Provides spacing between this toolbar and the editor's own toolbar */
}

/* --- Editor Loading Overlay --- */
.editor-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.editor-wrapper .editor-content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: filter 0.2s ease-in-out;
}

.editor-wrapper .editor-indicator-overlay {
    display: none; /* Hidden by default */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 8px;
    color: var(--brand-text-muted);
}

.editor-wrapper.htmx-request .editor-indicator-overlay { display: flex; }
.editor-wrapper.htmx-request .editor-content-area { filter: blur(2px); pointer-events: none; }

.utility-text-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--brand-accent-orange) !important;
    text-decoration: underline;
    font-weight: 500;
    min-height: auto !important;
}
.utility-text-button:hover { color: var(--brand-dark-blue) !important; text-decoration: underline; transform: none !important; }

button.format-toolbar {
    color: var(--brand-accent-orange);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.controls { display: flex; margin-bottom: 1rem; }
.controls input[type="search"] { flex-grow: 1; }
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}

/* A variation of list-header for the global page header bar that contains the breadcrumb */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: var(--brand-bg-light);*/ /* A very light grey for the toolbar background */
    padding: 0.50rem 1.1rem; /* More horizontal padding for better spacing */
   /* border-radius: 12px;*/
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.8rem; /* Reduce margin for better separation */
}

/* When the breadcrumb is inside the new toolbar, the toolbar itself provides the margin */
.page-header-bar .breadcrumb {
    margin-bottom: 0;
}

.page-header-right-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.controls {
    display: flex;
    flex-direction: column; /* Stack search and toggle vertically */
    gap: 0.75rem; /* Space between search and toggle */
    margin-bottom: 1rem;
}

.list-header-actions {
    display: flex;
    gap: 0.5rem;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap onto the next line */
    gap: 0.4rem; /* A slightly smaller gap to be more compact when wrapped */
    margin-bottom: 0.6rem;
    /* The border is removed from the container and will be applied to the buttons */
}
.filter-tabs input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}

/* Apply pill styles to both buttons (for Tasks page) and labels (for Projects page) */
.filter-tab, .filter-tabs label {
    padding: 0.25rem 0.7rem; /* More compact padding */
    background-color: var(--brand-white); /* Default state background */
    border: 1px solid var(--border-color);
    border-radius: 6px; 
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem; /* Smaller font size for compactness */
    color: var(--brand-text-muted);
    transition: all 0.2s ease-in-out;
    line-height: 1.2; /* Ensure consistent vertical alignment */
    text-decoration: none; /* For when used on <a> tags */
    white-space: nowrap; /* Prevent button text from wrapping */
}

.filter-tab:hover, .filter-tabs label:hover {
    color: var(--brand-dark-gray);
    border-color: var(--brand-accent-orange);
    background-color: rgba(255, 153, 0, 0.05); /* A very light orange for hover */
    transform: none; /* Override general button hover */
}

/* Style the active tab using the :checked pseudo-class on the hidden radio button */
.filter-tabs input[type="radio"]:checked + label,
.filter-tab.active { /* Keep .active for backwards compatibility with Tasks page */
    color: var(--brand-white);
    background-color: var(--brand-accent-orange);
    border-color: var(--brand-accent-orange);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.2); /* Add a subtle glow to the active tab */
    font-weight: 600; /* Bolder font for active state */
}

.filter-tab.disabled, .filter-tabs a.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-toggle label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
}

/* Hide the default checkbox */
.toggle-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    background-color: #ccc;
    border-radius: 22px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* Style the toggle handle */
.toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

/* Change background and handle position when checked */
.toggle-switch:checked {
    background-color: var(--brand-accent-orange);
}

.toggle-switch:checked::before {
    transform: translateX(18px);
}

.clear-filter-link {
    margin-left: 0.25rem; /* Adjust for inline positioning */
    color: var(--brand-text-muted);
    text-decoration: none;
    font-size: 0.9rem; /* Match breadcrumb font size */
    vertical-align: middle; /* Align icon with text */
}

#note-detail-pane,
#project-detail-pane, /* This is for project view */
#research-pane, /* This is for research view */
#task-detail-container, /* This is the container for the task view's right pane */
#asset-detail-pane {
    flex-grow: 1;
    background: var(--brand-white);
    border-radius: 16px;
    display: flex; /* Use flex to allow child to grow */
    flex-direction: column;
    overflow: hidden; /* The inner pane will scroll */
}

#cycle-detail-pane {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* The main container for the page content below the navigation tabs */
.container {
    background: var(--brand-white);
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    border: 1px solid #e2e8f0;
}

/* The actual scrollable content area inside the task detail container */
#task-detail-pane {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem; /* Add padding directly to the pane */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}

/* --- Login Page Specifics --- */
.login-page-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0; /* Override default body margin */
}

#login-container {
    width: 100%;
    max-width: 420px;
    text-align: center;
}


#login-container h1 { margin-bottom: 0.5rem; }
#login-container p { margin-bottom: 1.5rem; }
.login-form button {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem; /* Give login button more presence */
}

/* Loading indicator for login button */
.login-form button .htmx-indicator { display: none; }
.login-form.htmx-request button .htmx-indicator { display: inline; }
.login-form.htmx-request button .button-text {
    display: none;
}

/* Error message styling */
.error-message {
    display: block;
    text-align: center;
    color: var(--error-red);
    background-color: #fef2f2; /* A light red background */
    border: 1px solid var(--error-red);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Detail Pane Content */
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.detail-header h2 { margin: 0; }
.detail-meta { font-size: 0.9rem; color: var(--brand-text-muted); margin-bottom: 1rem; }

/* --- Project Stats Grid --- */
.project-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem; /* Increased padding for a more spacious feel */
    /* Subtle gradient using very light versions of brand colors, with a white fallback */
    background: linear-gradient(135deg, rgba(2, 1, 90, 0.02) 0%, rgba(255, 153, 0, 0.02) 100%), var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    /* A soft shadow to lift the card off the page */
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.stat-item-link {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
    padding: 0.5rem 0; /* Add some padding for the hover background */
    margin: -0.5rem 0; /* Counteract the padding to maintain alignment */
}

.stat-item-link:hover {
    transform: translateY(-2px);
    /* The background color is removed to better suit the gradient background. The transform provides enough feedback. */
}

.stat-value-overdue {
    color: var(--error-red);
}

.stat-value-urgent {
    color: var(--brand-accent-orange);
    /* Make icon slightly smaller than number values to look balanced */
    font-size: 1.5rem;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.stat-link-icon {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: all 0.2s ease-in-out;
}

.stat-item-link:hover .stat-link-icon {
    opacity: 1;
    color: var(--brand-accent-orange);
    transform: translateX(2px);
}

/* --- Metadata Grids for Task Detail and Edit Views --- */

/* For the task detail view */
.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
}

.meta-item {
    display: flex;
    min-width: 0; /* Crucial for allowing text truncation in flex children */
    flex-direction: column;
}

.meta-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--brand-dark-gray);
}

.assignee-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-item.full-width {
    grid-column: 1 / -1;
    /* Convert the full-width item into a grid container itself. */
    /* This isolates its layout and prevents its complex children 
       from interfering with the parent grid's column calculations. */
    display: grid; 
}

.project-link-in-grid {
    text-decoration: none;
    transition: color 0.2s ease;
}

.project-link-in-grid:hover {
    color: var(--brand-accent-orange);
    text-decoration: underline;
}

/* Utility class to truncate long text with an ellipsis */
.truncate-text {
    white-space: nowrap; /* Prevent the text from wrapping to the next line */
    overflow: hidden; /* Hide the part of the text that overflows */
    text-overflow: ellipsis; /* Add the '...' at the end */
    min-width: 0; /* Important for flex children to allow them to shrink */
    display: inline-block; /* Or block, depending on context */
}

/* For the task edit form */
.form-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end; /* Align items to the bottom to handle different label heights */
    margin-bottom: 1rem;
}

.tag-list { margin: 0.5rem 0; }
.tag { display: inline-block; background-color: var(--brand-bg-light); color: var(--brand-text-muted); padding: 0.25rem 0.6rem; border-radius: 12px; font-size: 0.8rem; margin-right: 0.5rem; }

/* --- Task Status Styling --- */
.status-open, .status-in_progress, .status-completed, .status-needs_review, .status-planned, .status-active, .status-archived {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-open .status-icon,
.status-in_progress .status-icon,
.status-completed .status-icon,
.status-needs_review .status-icon,
.status-planned .status-icon,
.status-active .status-icon,
.status-archived .status-icon {
    font-size: 0.9em; /* Relative to the parent's font-size for better scaling */
    opacity: 1; /* Ensure icon is fully visible inside the pill */
}

.status-open {
    background-color: #e0f2fe; /* light blue */
    color: #0c4a6e;
}
.status-in_progress {
    background-color: #fef9c3; /* light yellow */
    color: #713f12;
}
.status-completed {
    background-color: #dcfce7; /* light green */
    color: #166534;
}
.status-needs_review {
    background-color: #fffbeb; /* light amber */
    color: #92400e;
}
.status-planned {
    background-color: #e0f2fe; /* light blue, same as open */
    color: #0c4a6e;
}
.status-active {
    background-color: #dbeafe; /* lighter blue */
    color: #1d4ed8;
}
.status-archived {
    background-color: #f3f4f6; /* light gray */
    color: #4b5563;
}
/* Readonly input styling */
input[readonly] {
    background-color: #e9ecef; /* A light grey */
    cursor: not-allowed;
    opacity: 0.7;
}
input[readonly]:focus {
    box-shadow: none; /* Remove focus ring from readonly inputs */
    border-color: #cbd5e1;
}
/* --- Markdown Content Styling --- */
/* Apply to both final rendered content and the editor's preview pane */
.markdown-content,
.editor-preview {
    line-height: 1.6; /* Adjusted for better readability */
   /* background: #fafafa;*/
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6,
.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4,
.editor-preview h5,
.editor-preview h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
    margin-top: 1.75em;
    margin-bottom: 1em;
    font-weight: 600;
    line-height: 1.3;
}

.markdown-content h1, .editor-preview h1 { font-size: 2em; }
.markdown-content h2, .editor-preview h2 { font-size: 1.5em; }
.markdown-content h3, .editor-preview h3 { font-size: 1.25em; }

.markdown-content p,
.editor-preview p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.markdown-content ul,
.markdown-content ol,
.editor-preview ul,
.editor-preview ol {
    padding-left: 2em;
    margin-bottom: 1.25em;
}

/* This is the key fix: Reset UI styles for list items within markdown content */
.markdown-content li,
.editor-preview li {
    background: none;
    margin-bottom: 0.4em; /* Reduced spacing between list items */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: list-item; /* Restore default list behavior */
    border-left: none;
    cursor: default;
    transition: none;
}

.markdown-content li > p {
    margin-bottom: 0.4em; /* Tighter spacing for paragraphs inside list items */
}

.markdown-content li > ul,
.markdown-content li > ol {
    margin-top: 0.5em; /* Add some space before nested lists */
}

.markdown-content li:hover,
.editor-preview li:hover {
    transform: none;
    box-shadow: none;
}

.markdown-content ul li, .editor-preview ul li { list-style-type: disc; }
.markdown-content ol li, .editor-preview ol li { list-style-type: decimal; }

.markdown-content a, .editor-preview a { color: var(--brand-accent-orange); text-decoration: underline; }
.markdown-content blockquote, .editor-preview blockquote { border-left: 4px solid #e2e8f0; padding-left: 1em; margin-left: 0; color: #6c757d; font-style: italic; }
.markdown-content pre, .editor-preview pre { background-color: #f3f7fb; padding: 1em; border-radius: 8px; overflow-x: auto; }
.markdown-content code, .editor-preview code { font-family: monospace; background-color: #f3f7fb; padding: 0.2em 0.4em; border-radius: 4px; }
.markdown-content pre code, .editor-preview pre code { padding: 0; background-color: transparent; border-radius: 0; }


/* --- Task/Project Detail Output --- */
.detail-output {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.output-header h3 {
    margin-top: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
    margin: 0;
}

.output-actions {
    display: flex;
    gap: 0.5rem;
}

button.utility, a.utility-link {
    background-color: var(--brand-bg-light);
    color: var(--brand-text-muted);
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Ensure consistency for links */
    text-decoration: none; /* For <a> tags */
    display: inline-flex;
    align-items: center;
}

button.utility:hover, a.utility-link:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--brand-text-muted); /* Override link hover color */
}

button.utility i, a.utility-link i {
    margin-right: 0.4rem;
}
.detail-output pre {
    background-color: #f3f7fb;
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap; /* To wrap long lines */
    word-wrap: break-word; /* To break long words */
}
.detail-output code { font-family: monospace; background-color: transparent; padding: 0; }

/* --- AG-Grid Custom Theme --- */
.ag-theme-quartz {
    /* Font settings to match the app's typography */
    --ag-font-family: 'Be Vietnam Pro', sans-serif;
    --ag-font-size: 0.95rem;

    /* Main colors from the brand palette */
    --ag-background-color: var(--brand-white);
    --ag-foreground-color: var(--brand-dark-gray); /* Main text color for rows */
    --ag-secondary-foreground-color: var(--brand-text-muted); /* Lighter text for secondary info */

    /* Header styling */
    --ag-header-foreground-color: var(--brand-dark-blue);
    --ag-header-background-color: var(--brand-bg-light);
    --ag-header-row-border-color: #dde4ec; /* A slightly darker border for emphasis */
    --ag-header-cell-hover-background-color: #e9eff5; /* A slightly darker shade of bg-light */
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-color: #e2e8f0;

    /* Row styling */
    --ag-odd-row-background-color: var(--brand-white);
    --ag-row-hover-color: var(--brand-bg-light);

    /* Selection styling */
    --ag-selected-row-background-color: rgba(255, 153, 0, 0.15); /* Accent orange with opacity */
    --ag-range-selection-border-color: var(--brand-accent-orange);
    --ag-range-selection-background-color: rgba(255, 153, 0, 0.1);

    /* Borders and Separators */
    --ag-border-color: #e2e8f0;
    --ag-row-border-color: #e2e8f0;

    /* Icons */
    --ag-icon-size: 14px;
}

/* --- Generated Assets Styling --- */
.detail-assets {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.assets-header {
    margin-bottom: 1rem;
}
.assets-header h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
}
.asset-list {
    list-style: none;
    padding: 0;
}
/* Reset the default list item styling for asset items */
.asset-item {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-bottom: 0.5rem;
    cursor: pointer;
    /* The asset-link class is now on the li itself */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}
.asset-item-form {
    cursor: default;
    padding: 0;
}
.asset-item:hover {
    transform: none;
    box-shadow: none;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
}
.asset-link {
    flex-grow: 1; /* Allow the link to take up available space */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--brand-dark-blue); /* Use the primary dark blue for text */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.asset-link:hover {
    background-color: transparent; /* Override general hover since parent handles it */
}

.asset-icon {
    color: var(--brand-text-muted);
    font-size: 1.1rem;
    transition: color 0.2s ease;
}
.asset-link:hover .asset-icon {
    color: var(--brand-accent-orange); /* Also change icon color on hover */
}
.asset-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.asset-icon-wrapper {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* For the non-image icons */
    color: var(--brand-text-muted);
}
.asset-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--brand-bg-light); /* Fallback color while loading */
}
.asset-title {
    line-height: 1.3;
}
.asset-meta {
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    font-weight: 400;
}

/*
  The rename input field needs to be visually consistent with other inputs
  in the application and take up the available space. We increase specificity
  by including the tag name and override the base 'width' property to allow
  flex-grow to work correctly.
*/
input.rename-input {
    flex-grow: 1;
    width: 350px; /* Let flexbox determine the width, overriding the base 'width: 100%' */
    padding: 0.85rem 1rem; /* Match standard inputs */
    font-size: 1rem; /* Match standard inputs */
}
.save-rename-btn, .cancel-rename-btn {
    padding: 0.5rem 1rem; /* Match standard buttons */
    width:150px;
}

/* Use the brand's secondary font for grid headers to match titles */
.ag-theme-quartz .ag-header-cell-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Responsive Breakpoint */
@media (max-width: 800px) {
    .app-layout {
        flex-direction: column;
        height: auto;
        padding: 5px;
    }

    #note-list-pane,
    #task-list-pane,
    #project-list-pane,
    #asset-list-pane {
        width: 100%;
    }

    #note-detail-pane.mobile-hide,
    #task-detail-pane.mobile-hide,
    #project-detail-pane.mobile-hide,
    #asset-detail-pane.mobile-hide {
        display: none !important;
    }

    #note-detail-pane.mobile-show,
    #task-detail-pane.mobile-show,
    #project-detail-pane.mobile-show,
    #asset-detail-pane.mobile-show {
        display: flex !important;
        padding: 1.5rem;
    }

    #note-detail-pane.mobile-show .mobile-back-button-wrapper, #task-detail-pane.mobile-show .mobile-back-button-wrapper, #project-detail-pane.mobile-show .mobile-back-button-wrapper {
        display: block;
        margin-bottom: 1rem;
    }

    .mobile-back-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        border: none;
        color: var(--brand-text-muted);
        font-size: 0.95rem;
        padding: 0;
        cursor: pointer;
    }
    .detail-pane-empty { min-height: 200px}
}

.mobile-hide { display: none !important;}
.container { padding: 10px}

/* --- Spinner & Loading Indicators --- */

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spinner Base Style */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(2, 1, 90, 0.1); /* Muted brand color */
  border-radius: 50%;
  border-top-color: var(--brand-accent-orange);
  animation: spin 0.6s linear infinite;
}

/* Reusable Form Loading Indicator Pattern */
.form-with-indicator .indicator-content {
    display: none; /* Hidden by default */
}

.form-with-indicator.htmx-request .indicator-content {
    display: flex; /* Shown during HTMX request */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    height: 100%; /* Make indicator fill the pane */
}

.form-with-indicator.htmx-request .form-fields {
    display: none; /* Hide the actual form fields during request */
}

/* Special handling for form indicators inside a modal when the hx-indicator
   is on the modal content wrapper. This allows us to disable footer buttons
   while still showing the loading state inside the form. */
#app-modal-content.htmx-request .form-with-indicator .indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    height: 100%;
}

#app-modal-content.htmx-request .form-with-indicator .form-fields {
    display: none;
}

/* --- Button with Loading Indicator --- */
/* Generic HTMX indicator styles for fade-in effect */
.htmx-indicator {
    opacity:0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity:1
}
.htmx-request.htmx-indicator {
    opacity:1
}

/* Show the spinner and hide the text when the request is in flight */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request .button-text {
    display: none;
}

/* --- Global API Request Cursor --- */
/* When any HTMX request is in flight (handled by global-events.js),
   change the cursor for the entire page to a waiting/progress cursor.
   This provides immediate feedback. The `!important` flag ensures this
   overrides other cursor styles (e.g., pointer on buttons) during the request. */
body.cursor-wait, body.cursor-wait * {
    cursor: wait !important;
}

/* --- Full Page Loading Indicator --- */
.full-page-indicator {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2000; /* High z-index to be on top of everything */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    backdrop-filter: blur(4px);
}

/* Show the indicator when the body has the htmx-request class */
body.htmx-request .full-page-indicator {
    display: flex;
}

.full-page-indicator .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
}



/* --- Main Application Tab Navigation --- */
.app-nav {
    display: flex;
    /*background-color: #fff;*/
    /*border-bottom: 0px solid #e0e0e0;*/
    /*padding: 0 1rem;*/ /* Align with container padding */
}

.app-nav-item {
    padding: 0.9rem 1.5rem;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.app-nav-item:hover {
    color: #000;
}

.app-nav-item.active {
    color: var(--brand-accent-orange);
    border-bottom-color: var(--brand-accent-orange);
}

/* --- Project Page Specific Styles --- */
.project-actions-toolbar {
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 0.5rem;
}
.detail-goal {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-left: 4px solid #007bff;
    border-radius: 4px;
}
.detail-goal h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
    color: #333;
}
.detail-goal p {
    margin-bottom: 0;
    color: #555;
}
#project-list .project-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
#project-list .project-item-content p {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}
/* --- Research Page Specific Styles --- */
.research-form {
    display: flex;
    flex-direction: row; /* Override the default form stacking */
    flex-wrap: nowrap; /* Keep form elements on a single line */
    gap: 0.75rem;
    align-items: center; /* Vertically center form elements */
    /* max-width is removed to allow the form to span the full width of its container */
    margin-bottom: 2rem; /* Add spacing below the form */
}
.research-form input[type="search"] {
    flex-grow: 1;
    min-width: 250px; /* A more reasonable minimum width */
    width: auto; /* Override base width: 100% to allow flex-grow to work correctly */
}
.research-form button i {
    margin-right: 0.5rem;
    font-size: 0.9rem; /* Slightly smaller icon for the search button */
}

/* Hide the initial message when a search is in progress */
#research-results.htmx-request .initial-message {
    display: none;
}
.search-summary {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1.5rem; /* Reduced vertical padding */
    margin-bottom: 2rem;
}
.summary-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.summary-actions .htmx-request .button-text {
    display: none;
}
.summary-actions .htmx-request .htmx-indicator {
    display: inline-block;
}

.search-result-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.favicon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: #f0f4f8; /* Fallback color */
}
.search-result-item h3 a {
    color: #1a0dab;
    text-decoration: none;
    font-weight: normal;
}
.search-result-item h3 a:hover {
    color: var(--brand-accent-orange);
    text-decoration: underline;
}

/* --- Research Form Select Dropdown --- */
.research-form select {
    /* Reset appearance to allow custom styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Match other inputs */
    padding: 0.85rem 2.5rem 0.85rem 1rem; /* Adjust right padding for arrow */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-color-primary);
    background-color: var(--brand-white);
    cursor: pointer;

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* --- Modal Form Specifics --- */
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0; /* Ensure footer doesn't shrink */
}

/* Disable modal footer buttons during a request to prevent duplicate submissions */
#app-modal-content.htmx-request .modal__footer button {
    pointer-events: none;
    opacity: 0.65;
}

.asset-selection-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--brand-bg-light);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.asset-checkbox {
    margin-top: 0; /* Override default form-group margin */
    background-color: var(--brand-white);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.asset-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--brand-dark-blue);
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.form-group-checkbox input[type="checkbox"] {
    width: auto; /* Don't make checkbox full width */
    flex-grow: 0;
}

.form-group-checkbox label {
    font-weight: 500;
}

/* --- Micromodal Styling --- */
.modal {
    font-family: 'Be Vietnam Pro', sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal__container {
  background-color: var(--brand-white);
  width: 90%;
  max-width: 800px;
  max-height: 90vh; /* Set a max height */
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.5rem; /* Add padding here instead of container */
  flex-shrink: 0; /* Ensure header doesn't shrink */
}

.modal__title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--brand-dark-gray);
}

.modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.modal__close:before {
  content: '\00d7';
  font-size: 2rem;
  color: var(--brand-text-muted);
  line-height: 1;
}

.modal__content {
  /* This is the main content area that will be swapped by HTMX.
     It needs to be a flex container to manage its children (the view wrapper and the footer). */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow it to fill the available space in the container */
  min-height: 0; /* Crucial for allowing flex children to shrink and scroll correctly */
  overflow: hidden; /* Hide any overflow from this container itself */
}
.modal-view-content-wrapper, .modal-content-padded-scrolling {
  flex-grow: 1; /* Allow content to fill space */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  padding: 1.5rem; /* Add consistent internal padding */
  line-height: 1.6;
}
/* When the image modal is used, its wrapper needs to be a positioning context */
.modal-view-content-wrapper[style*="padding: 0"] {
    position: relative;
}

.modal-actions-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--brand-bg-light);
    flex-shrink: 0; /* Prevent this toolbar from shrinking */
}


/* Animation */
.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mm-fadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mm-slideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mm-fadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mm-slideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.modal__content {
  /* ... existing styles ... */
  display: flex; /* Make this the primary flex container */
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

/* The container for the standard image view, ensures it's centered */
.image-viewer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--brand-bg-light);
}

/* --- ToastUI Image Editor Integration --- */

/* The container for the standard image view, ensures it's centered */
.image-viewer-container {
    display: flex;
    /* ... existing styles ... */
}

/* This is the iframe itself, it should fill the entire modal content area */
.image-editor-iframe {
    width: 100%;
    flex-grow: 1;
    border: none;
    /* display: none; is handled inline */
}

/* When the editor is active, the app-layout becomes a flex column */
.app-layout.editor-mode {
    flex-direction: column;
    gap: 0; /* Remove gap between header and iframe container */
}

.editor-header-container {
    flex-shrink: 0; /* Prevent the header from shrinking */
    padding-bottom: 1rem; /* Space between header and editor */
}

.editor-iframe-container {
    flex-grow: 1; /* Allow the iframe container to fill remaining space */
    min-height: 0; /* Critical for flex-grow to work correctly */
}

.image-editor-full-pane-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* New style to make the app-layout go full-screen for the editor */
.app-layout.editor-mode {
    top: 130px; /* Adjust this value to match the height of your main-header and app-nav */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto; /* Let top/bottom positioning define the height */
    z-index: 100; /* Ensure it's above other content */
}


/* The editor creates a canvas wrapper that also needs to be flexible */
/* 
.app-layout.editor-mode {
    top: 130px; 
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto; 
    z-index: 100; 
}
*/
@keyframes mm-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mm-slideIn { from { transform: translateY(15%); } to { transform: translateY(0); } }
@keyframes mm-slideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } }
.search-result-url {
    font-size: 0.85rem;
    color: #5f6368;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    word-break: break-all; 
}
.search-result-url a {
    color: inherit;
}
.new-item-container {
    display: flex;
    flex-direction: column;
}

.create-with-ai-section {
    text-align: center;
    padding: 2rem;
    background-color: var(--brand-bg-light);
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    margin-bottom: 2rem;
} 

.create-with-ai-section h2 {
    margin-top: 0;
    color: var(--brand-dark-blue);
}

.create-with-ai-section p {
    color: var(--brand-text-muted);
    max-width: 450px;
    margin: 0 auto 1.5rem auto;
}

.create-with-ai-button {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
}

.create-with-ai-button i {
    margin-right: 0.5rem;
}

.manual-creation-divider {
    text-align: center;
    margin-bottom: 2rem;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.manual-creation-divider::before,
.manual-creation-divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #e2e8f0;
}

.new-item-container .project-edit-form,
.new-item-container .task-edit-form {
    height: auto;
}

.prompt-templates { margin-top: 1.5rem; }
.prompt-templates label { font-weight: 600; color: var(--brand-dark-gray); margin-bottom: 0.75rem; display: block; }
.prompt-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.prompt-button { background-color: var(--brand-bg-light); color: var(--brand-text-muted); padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 500; border: 1px solid #e2e8f0; border-radius: 8px; text-align: left; justify-content: flex-start; }
.prompt-button:hover { background-color: #e2e8f0; border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--brand-dark-blue); }
.prompt-button.selected { background-color: rgba(255, 153, 0, 0.15); border-color: var(--brand-accent-orange); color: var(--brand-dark-blue); font-weight: 600; }
.prompt-button i { margin-right: 0.75rem; color: var(--brand-accent-orange); width: 16px; }

.role-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.role-option {
    display: flex;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-option:hover {
    background-color: var(--brand-bg-light);
    border-color: var(--brand-accent-orange);
}

.role-option input[type="radio"] {
    margin-top: 0.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.role-option label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 100%;
}

.modal-form-divider {
    text-align: center;
    margin: 1.5rem 0;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-form-divider::before,
.modal-form-divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #e2e8f0;
}

.confirmation-modal-content {
    padding: 2rem;
    text-align: center;
}
.confirmation-modal-content p:first-of-type {
    font-size: 1.1rem;
    color: var(--brand-dark-gray);
    margin-bottom: 0.5rem;
}
.confirmation-modal-content p:last-of-type {
    color: var(--brand-text-muted);
}
.confirmation-modal-content strong {
    font-weight: 600;
}

.modal__footer .primary i {
    margin-right: 0.5rem;
}

.detail-actions button i,
.note-actions button i,
.task-actions button i {
    margin-right: 0.5rem;
}

.research-form select {
    width: auto; /* Override base width: 100% */
    flex-grow: 0; /* Prevent the select dropdown from growing */
    transition: all 0.2s ease; /* Ensure transition matches other inputs */
}

.research-form .htmx-indicator {
    display: none;
}
.research-form.htmx-request {
    pointer-events: none;
}
.research-form.htmx-request .button-text {
    display: none;
}
.research-form.htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}
.related-topics {
    margin-top: 2rem;
}
.related-topics h4 {
    margin-bottom: 1rem;
    color: #212529;
}
.related-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.related-topic-button {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.related-topic-button:hover {
    background-color: #ced4da;
}
.related-topic-button i {
    margin-right: 0.4rem;
}
.external-search-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

/* --- Research Results Scrolling --- */
#research-results {
    flex-grow: 1; /* Allow the results to fill the remaining space */
    overflow-y: auto; /* Enable vertical scrolling when content overflows */
    padding: 1rem 1.5rem 1.5rem; /* Add internal padding to match container */
}

/* Example CSS for the new empty state component */
.detail-pane-empty-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-color-secondary);
    box-sizing: border-box;
    height: 100%;
    position: relative; /* Establishes a stacking context for the watermark. */
    overflow: hidden; /* Keeps the watermark within the rounded corners. */
}

.detail-pane-empty-enhanced .empty-state-icon svg {
    color: var(--border-color);
    margin-bottom: 1.5rem;
}

.detail-pane-empty-enhanced h2 {
    color: var(--text-color-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.detail-pane-empty-enhanced p {
    max-width: 400px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detail-pane-empty-enhanced .empty-state-actions {
    display: flex;
    gap: 1rem;
}

/* --- Empty Pane Watermark --- */
/* Adds a subtle background pattern to empty detail panes for visual polish,
   making the application feel more complete even when there is no data to show. */
/* The ::before pseudo-element creates the dot-grid pattern. It's placed at z-index: 0,
   acting as a background layer within the element's stacking context. */
.detail-pane-empty-enhanced::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.3;
    z-index: 0; /* Base layer of the stacking context. */
}

/* The > * selector targets all direct children (icon, h2, p, etc.) and lifts them
   to a higher z-index, ensuring they appear on top of the watermark pattern. */
.detail-pane-empty-enhanced > * {
    position: relative;
    z-index: 1;
}

.detail-pane-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--brand-text-muted);
    gap: 1rem;
    box-sizing: border-box;
}

/* --- Split Button --- */
.split-button-container {
    position: relative;
    display: inline-flex;
}

.split-button-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.split-button-container .split-button-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #d4d9e0; /* A slightly darker border for the split */
}

.split-button-dropdown {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-radius: 0 8px 8px 0!important;
    padding: 0.5rem 0.75rem; /* Tighter padding for the arrow */
}

.split-button-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--brand-white);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.split-button-menu.show {
    display: block;
}

.split-button-menu a {
    color: var(--brand-text-muted);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
}

.split-button-menu a:hover {
    background-color: var(--brand-bg-light);
}

/* --- Kanban Board View --- */
.kanban-board-container {
    height: calc(100vh - 10rem); /* Adjust to fit your header/nav height */
    display: flex;
    flex-direction: column;
}

.kanban-board {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    flex-grow: 1;
}

.kanban-column {
    width: 320px;
    flex-shrink: 0;
    background-color: var(--brand-bg-light);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.kanban-column-header {
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

.kanban-task-list {
    padding: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
}

/* Override default li styles for Kanban cards */
.kanban-task-list .task-item {
    cursor: grab;
}

.kanban-task-list .task-item:active {
    cursor: grabbing;
    background-color: #e9eff5;
}

/* Override the general styles for the task pane now that it's inside a container */
#task-detail-pane {
    flex-grow: 1;
    overflow-y: auto;
    background: none;
    border-radius: 0;
}

/* Style for the placeholder element when dragging a task in Kanban view */
.sortable-ghost {
    background-color: rgba(255, 153, 0, 0.1);
    border: 2px dashed var(--brand-accent-orange);
    opacity: 0.6;
}

.hidden {
    display: none !important;
}

/* --- Agent Switcher Modal --- */
.agent-switcher-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.agent-switcher-list li {
    background: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
    cursor: default;
}

.agent-switcher-list li:hover {
    transform: none;
    box-shadow: none;
}

.agent-switcher-list button {
    justify-content: flex-start;
    text-transform: uppercase;
    font-size: 1rem;
    gap: 0.75rem;
}

/* --- Custom Fields Styling --- */

/* For the detail view */
.detail-custom-fields-inner {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure this container takes full width of its parent flex item */
}

.detail-custom-fields-inner > .meta-label {
    margin-bottom: 0.25rem; /* Match standard meta-item spacing */
}

.custom-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem; /* row-gap column-gap */
    width: 100%; /* Ensure it takes full width of parent */
}

/* Override nested meta-item styles within the custom fields grid */
.custom-fields-grid .meta-item {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.custom-fields-grid .meta-label.custom-field-key-label {
    font-size: 0.8rem;
    font-weight: 500; /* Less emphasis than the main meta-label */
    color: var(--brand-text-muted);
    text-transform: none; /* Use normal case for custom field keys */
}

/* For the form inputs */
.custom-field-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.remove-field-btn {
    background: none;
    border: none;
    color: var(--brand-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.5rem;
    cursor: pointer;
    min-height: auto;
}
.remove-field-btn:hover {
    color: var(--error-red);
    transform: none;
}

/* --- Home/Dashboard Specific Styles --- */
.app-layout.home-layout {
    flex-direction: column; /* Stack header and grid vertically */
    height: auto; /* Override the default fixed height from .app-layout */
    min-height: calc(100vh - 12rem); /* Ensure it fills the viewport height minus headers/padding */
    flex-grow: 1;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dashboard-header h1 {
    font-size: 2rem;
    color: var(--brand-dark-gray);
}

.dashboard-header h1 #user-name {
    color: var(--brand-accent-orange);
}

.dashboard-layout {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-grow: 1; /* Allow grid to fill remaining space */
    align-items: flex-start; /* Prevent columns from stretching to match height */
}

.dashboard-column-main {
    flex: 2; /* Takes up 2/3 of the space */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.dashboard-column-side {
    flex: 1; /* Takes up 1/3 of the space */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-card {
    background-color: var(--brand-white);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 150px; /* Ensure cards have a minimum height even if empty */
}

/* Cards that should grow to fill available space and scroll */
.dashboard-card-scrollable {
    flex-grow: 1;
}

.dashboard-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--brand-dark-gray);
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-card h3 i {
    color: var(--brand-accent-orange);
}

.dashboard-card h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--brand-text-muted);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.dashboard-task-list, .recent-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto; /* Enable scrolling for long lists */
}

.dashboard-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.dashboard-task-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dashboard-task-item strong {
    font-weight: 500;
    color: var(--brand-dark-gray);
}

.dashboard-task-item .task-item-meta {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-task-item.status-overdue {
    border-left: 4px solid var(--error-red);
}

.recent-activity-item {
    margin-bottom: 0.5rem;
}

.recent-activity-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--brand-dark-gray);
    transition: all 0.2s ease-in-out;
}

.recent-activity-item a:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.recent-activity-item i {
    color: var(--brand-accent-orange);
}

.recent-activity-item .activity-date {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    margin-left: auto; /* Push date to the right */
}

.empty-state-message {
    text-align: center;
    color: var(--brand-text-muted);
    margin-top: 2rem;
}

/* Adjustments for smaller screens */
@media (max-width: 800px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .dashboard-header h1 {
        font-size: 1.5rem;
    }
    .dashboard-layout {
        flex-direction: column;
    }
    .dashboard-card {
        max-height: none; /* Allow cards to grow on mobile */
    }
}

/* --- Cycles / Sprints View --- */
.project-detail-tab-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cycles-list {
    flex-grow: 1;
    overflow-y: auto;
}

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.project-list-container {
    overflow-y: auto;
    flex-grow: 1;
}

.list-item-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
}

.list-item-card-header { display: flex; justify-content: space-between; align-items: center; }
.list-item-card-header h4 { margin: 0; font-family: 'Poppins', sans-serif; }
.list-item-card-body { flex-grow: 1; }
.list-item-card-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

.task-title-link {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
    text-decoration: none;
}
.task-title-link:hover {
    text-decoration: underline;
    color: var(--brand-accent-orange);
}
.status-indicator { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; }

/* --- Comments Section --- */
.detail-comments {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.comments-header h3 {
    margin: 0 0 1rem 0;
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
    font-size: 1.1rem;
}
.comments-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}
.comment-item {
    display: flex;
    gap: 0.75rem;
}
.comment-avatar .assignee-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}
.comment-body {
    background-color: var(--brand-bg-light);
    padding: 0.75rem;
    border-radius: 0 12px 12px 12px;
    flex-grow: 1;
}
.comment-item-own .comment-body {
    background-color: #e0f2fe; /* Light blue for own comments */
}
.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    align-items: center; /* Align author and meta vertically */
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.comment-author { font-weight: 600; color: var(--brand-dark-blue); }
.comment-date { color: var(--brand-text-muted); }
.comment-content { font-size: 0.95rem; color: var(--brand-dark-gray); line-height: 1.4; }
.comments-empty-state { color: var(--brand-text-muted); font-style: italic; font-size: 0.9rem; margin-bottom: 1rem; }

.comment-form {
    display: flex;
    gap: 0.5rem;
}
.comment-form input {
    border-radius: 10px;
    padding: 0.6rem 1rem;
}
.comment-form button {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    /*padding: 0;*/
}

/* Comment Actions */
.comment-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0; /* Hide by default */
    transition: opacity 0.2s ease;
}
.comment-item:hover .comment-actions {
    opacity: 1; /* Show on hover */
}
.icon-btn {
    background: none;
    border: none;
    padding: 0.2rem;
    color: var(--brand-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    min-height: auto;
}
.icon-btn:hover { color: var(--brand-accent-orange); transform: none; }
.icon-btn.danger:hover { color: var(--error-red); }

.comment-edit-form textarea {
    min-height: 60px;
    margin-bottom: 0.5rem;
}

/* --- Notification Center --- */
.notification-container {
    position: relative;
}

.notification-bell {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--brand-text-muted);
    position: relative;
    padding: 0.5rem;
    transition: color 0.2s;
}

.notification-bell:hover {
    color: var(--brand-accent-orange);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--error-red);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: none; /* Hidden if 0 */
    align-items: center;
    justify-content: center;
}

.notification-badge.show {
    display: flex;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 350px;
    background: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow: hidden;
}

.notification-dropdown.show {
    display: block;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.notification-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    position: relative;
}

.notification-item:hover { background-color: var(--brand-bg-light); }
.notification-item.unread { background-color: #fff7ed; } /* Light orange tint */

.notification-header { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--brand-text-muted); margin-bottom: 0.25rem; }
.notification-agent { font-weight: 600; text-transform: uppercase; }
.notification-title { font-weight: 600; font-size: 0.9rem; color: var(--brand-dark-gray); margin-bottom: 0.25rem; }
.notification-message { font-size: 0.85rem; color: var(--brand-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notification-dot { width: 8px; height: 8px; background-color: var(--brand-accent-orange); border-radius: 50%; margin-top: 0.5rem; }
.empty-notifications { padding: 2rem; text-align: center; color: var(--brand-text-muted); font-style: italic; }

.notification-clear-btn {
    background: none;
    border: none;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.notification-item:hover .notification-clear-btn { opacity: 1; }
.notification-clear-btn:hover { color: var(--error-red); }

.notification-actions-bar {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}


/* Threaded Comments */
.comment-replies {
    margin-left: 2rem;
    border-left: 2px solid var(--border-color);
    padding-left: 1rem;
    margin-top: 0.5rem;
}
.comment-reply-box {
    margin-left: 3.5rem; /* Align with content */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.comment-annotation-label {
    font-size: 0.75rem;
    color: var(--brand-accent-orange);
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* --- Cycle Planning Board --- */
.planning-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 1.5rem;
    box-sizing: border-box;
}

.planning-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.planning-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.planning-board {
    display: flex;
    gap: 1.5rem;
    flex-grow: 1;
    overflow: hidden; /* Columns scroll internally */
    min-height: 0;
}

.planning-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-bg-light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    min-width: 0; /* Allow flex shrink */
}

.planning-column-header {
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255,255,255,0.5);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.planning-task-list {
    padding: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
}