.task-list-container {
    padding: 10px;
    font-family: inherit;
}

.task-drag-handle {
    cursor: grab;
    color: #999;
    font-size: 12px;
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
}

.task-input-container {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-input {
    width: 95%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.2s ease;
}

.task-input:focus {
    outline: none;
    border-color: #007DB8;
    box-shadow: 0 0 0 2px rgba(0, 125, 184, 0.1);
}



.tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    margin-top: 25px !important;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 6px 12px !important;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.task-drag-handle {
    cursor: grab;
    color: #999;
    font-size: 18px;
    margin-right: 2px;
    margin-left: 2px;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
}

.task-drag-handle:hover {
    color: #666;
    background: rgba(0, 0, 0, 0.05);
}

.task-drag-handle:active {
    cursor: grabbing;
}

.task-item:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* Drag & drop visual helpers */
.task-item.drag-over {
    outline: 2px dashed rgba(0, 125, 184, 0.35);
    background: #eef9ff;
}

.task-item.dragging {
    opacity: 0.5;
    /* transform: rotate(3deg) scale(1.05); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border: 4px solid #007DB8 !important;
}

/* Placeholder used for touch drag-and-drop */
.task-item.placeholder {
    border: 1px dashed #cbd5e0;
    background: rgba(0, 0, 0, 0.02);
}

.task-item.completed {
    background: #f0f8f0;
    border-color: #c8e6c9;
    opacity: 0.8;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: #666;
}

.task-item.completed .task-text a {
    color: #666;
}

.task-item.completed .task-text a:hover {
    color: #444;
    text-decoration: underline;
}

.task-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #007DB8;
    margin-right: 12px;
}

.task-text {
    flex: 1;
    font-size: var(--note-font-size, 15px);
    line-height: 1.4;
    cursor: text;
    /* Ensure very long words/URLs wrap to next line to avoid overflowing the container */
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 2px 0;
    min-height: 20px;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.task-text a {
    color: #007DB8;
    text-decoration: none;
    word-break: break-all;
}

.task-text a:hover {
    color: #005a8a;
    text-decoration: underline;
}

.task-edit-input {
    flex: 1;
    padding: 2px 4px;
    border: 1px solid #007DB8;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    outline: none;
}

/* Make sure the inline edit input doesn't cause horizontal scrolling and wraps long content */
.task-edit-input,
.task-input {
    white-space: pre-wrap;
    /* preserve user line breaks but allow wrapping */
    overflow-wrap: anywhere;
}

.task-delete-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-move-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-delete-btn i {
    font-size: 16px !important;
}

.task-important-btn i {
    font-size: 16px !important;
}

.task-move-btn i {
    font-size: 16px !important;
}

.task-delete-btn i,
.task-important-btn i,
.task-move-btn i,
.task-drag-handle i {
    color: #999;
    font-family: "Font Awesome 5 Pro" !important;
    font-style: normal !important;
    display: inline-block;
}

.task-delete-btn:hover i {
    color: #d32f2f;
}

.task-important-btn:hover i {
    color: #ffa000;
}

.task-move-btn:hover i {
    color: #007DB8;
}

/* Important task styling */
.task-item.important {
    border-color: #ffcccc;
    background: #fff6f6;
}

.task-item.important .task-text {
    color: #c62828;
    /* red text for important tasks */
    font-weight: 600;
}

.task-item.important .task-text a {
    color: #c62828;
    font-weight: 600;
}

.task-item.important .task-text a:hover {
    color: #8b0000;
    text-decoration: underline;
}

.task-important-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-icon-trash::before {
    content: "\f2ed";
}

.task-icon-star::before {
    content: "\f005";
}

.task-icon-trash,
.task-icon-star {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-size: 0.875em;
    vertical-align: middle;
}

/* Red star icon for important tasks */
.task-item.important .task-icon-star {
    color: #ff0000 !important;
}

.task-item.important .fa-star {
    color: #ff0000 !important;
}

.task-important-btn.is-favorite i {
    color: #ff0000 !important;
}

/* Ensure Font Awesome glyphs render correctly inside tasklist notes
     even when `.noteentry` applies a global font-family (e.g. Inter). */
.noteentry[data-note-type="tasklist"] .task-item i,
.noteentry[data-note-type="tasklist"] .task-item i::before {
    font-family: "Font Awesome 5 Pro" !important;
    font-style: normal !important;
    font-variant: normal;
    text-transform: none;
    /* Do not force font-weight here; let Font Awesome CSS decide the correct variant */
}

/* Tasklist note styles - Hide separator and table buttons for tasklist notes */
.innernote[data-tasklist-note="true"] .btn-separator,
.innernote[data-tasklist-note="true"] .btn-table,
.innernote[data-tasklist-note="true"] .btn-checklist {
    display: none !important;
}

/* Task order button styles */
.btn-task-order {
    position: relative;
    transition: all 0.2s ease;
}

.btn-task-order.active {
    background-color: rgba(0, 125, 184, 0.1);
    color: #007DB8;
}

.btn-task-order:hover {
    background-color: rgba(0, 125, 184, 0.05);
}

.btn-task-order.active:hover {
    background-color: rgba(0, 125, 184, 0.15);
}

/* Callout / alert styles (Note, Tip, Important, Warning, Caution) */
.callout {
    display: block;
    border-left: 3px solid #ccc;
    padding: 8px 0 8px 12px;
    margin: 12px 0;
}

.callout .callout-title {
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.callout .callout-body {
    font-size: 14px;
    line-height: 1.45;
}

/* Ensure callouts look good inside notes (inherit text color) */
.noteentry .callout,
.innernote .callout {
    color: inherit;
}

/* Icon and title tuning */
.callout .callout-icon-svg {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    opacity: 0.75;
    /* lighten icons so they're not too dark */
}

.callout .callout-title-text {
    font-weight: 600;
    font-size: 14px;
}

/* Callout colors - border, icon and title */
.callout-note {
    border-left-color: #0969da;
}

.callout-note .callout-icon-svg,
.callout-note .callout-title-text {
    color: #0969da;
    fill: #0969da;
}

.callout-tip {
    border-left-color: #1a7f37;
}

.callout-tip .callout-icon-svg,
.callout-tip .callout-title-text {
    color: #1a7f37;
    fill: #1a7f37;
}

.callout-important {
    border-left-color: #8250df;
}

.callout-important .callout-icon-svg,
.callout-important .callout-title-text {
    color: #8250df;
    fill: #8250df;
}

.callout-warning {
    border-left-color: #9a6700;
}

.callout-warning .callout-icon-svg,
.callout-warning .callout-title-text {
    color: #9a6700;
    fill: #9a6700;
}

.callout-caution {
    border-left-color: #d1242f;
}

.callout-caution .callout-icon-svg,
.callout-caution .callout-title-text {
    color: #d1242f;
    fill: #d1242f;
}

/* Toggle / Collapsible block styles */
.toggle-block {
    display: block;
    /* margin: 0.5em 0; */
    overflow: hidden;
    /* padding-bottom: 20px; */
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    /* border: 1px solid #e1e4e8; */
    border-radius: 6px;
}

/* Ensure caret is visible at the bottom of the open block */
.toggle-block[open] {
    padding-bottom: 20px;
}

/* Target only the first summary to avoid duplicate arrows if browser quirks occur */
.toggle-block>summary {
    display: flex;
    align-items: center;
    padding: 10px 0px 0px 1px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    /* Hide default marker in Firefox */
    user-select: none;
    outline: none;
    /* Remove focus outline */
    white-space: nowrap;
    overflow: hidden;
    /* border-bottom: 1px solid #e1e4e8; */
    text-overflow: ellipsis;
    min-width: 0;
    margin-bottom: 15px;
}

/* Hide any subsequent summaries that might be accidentally created */
.toggle-block>summary~summary {
    display: none !important;
}

/* Hide default marker in Webkit */
.toggle-block>summary::-webkit-details-marker {
    display: none;
}

.toggle-block>summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 10px;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.toggle-block[open]>summary::before {
    transform: rotate(90deg);
}

/* .toggle-block > summary:hover handled by removing opacity */

/* Move border to summary when open for consistent looking regardless of content structure */
.toggle-block[open]>summary {
    /* border-bottom: 1px solid #e1e4e8; */
    margin-bottom: 15px;
    /* Spacing between header and content */
}

/* Base style for content elements (both wrapper div and direct children) */
.toggle-block>.toggle-content,
.toggle-block>p,
.toggle-block>ul,
.toggle-block>ol,
.toggle-block>div:not(.toggle-content),
.toggle-block>pre,
.toggle-block>blockquote {
    font-size: 0.95em;
    line-height: 1.6;
}

/* HTML Mode: Content inside wrapper */
.toggle-block>.toggle-content {
    padding: 8px 10px 0px 0px;
    border-top: none;
    /* Removed in favor of summary border */
}

/* Placeholder for empty toggle content */
.toggle-block>.toggle-content[data-ph]:empty:before {
    content: attr(data-ph);
    color: #999;
    font-style: italic;
    opacity: 0.6;
}

/* Markdown Mode: Direct children indentation */
.toggle-block>p,
.toggle-block>ul,
.toggle-block>ol,
.toggle-block>div:not(.toggle-content),
.toggle-block>pre,
.toggle-block>blockquote {
    /* margin-left: 15px !important; */
    margin-right: 10px;
    margin-bottom: 0.5em;
}

/* Reset margin for p inside toggle-content (HTML mode) */
.toggle-block>.toggle-content p {
    margin: 0;
}

/* Placeholder line before/after toggle (HTML mode) */
.toggle-before-placeholder:empty:before,
.toggle-after-placeholder:empty:before {
    content: attr(data-ph);
    color: #999;
    font-style: italic;
    opacity: 0.6;
}

/* Dark mode adjustments */
body.dark-mode .toggle-block {
    border-color: #30363d;
}

body.dark-mode .toggle-block[open]>summary {
    border-bottom-color: #30363d;
}