/*
    FluxGarden CSS
*/

a.wikilog { text-decoration: none; border-bottom:1px solid gray; color: black; }
a.wikilog_missing { text-decoration: none; border-bottom:1px dashed gray; color: black; }

/* two columns: controls (drag handle, star, status), then title + ancestors,
   so wrapped lines align with the first line's text */
.task-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.3em;
}

.task-controls {
    flex: 0 0 auto;
    white-space: nowrap;
}

.task-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.drag-handle {
    cursor: grab;
    color: #999;
    margin-right: 0.3em;
}

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

.mit-toggle {
    cursor: pointer;
    margin-right: 0.3em;
}

/* gold star for MIT tasks, clickable (.mit-toggle) or display-only */
.mit-on {
    color: #d4a017;
}

/* Descendant tree rows: fixed-width controls column so every title starts
   at the same offset from its row's indent, task or note */
.tree-row {
    display: flex;
    align-items: baseline;
}

.tree-controls {
    flex: 0 0 5em;
    display: flex;
    align-items: baseline;
}

/* invisible star keeps a note's icon in the same column as its task peers'
   status dropdowns; padding matches the dropdown's padding + border */
.tree-controls .mit-spacer {
    visibility: hidden;
    cursor: default;
}

.tree-controls .note-icon {
    padding-left: calc(0.25rem + 1px);
}

.expand-tree {
    cursor: pointer;
    color: #666;
    margin-left: 0.3em;
}

.mit-separator {
    margin: 0.5em 0;
    border-top: 1px dashed #ccc;
}

/* Status icons for task nodes */
.status-icon {
    margin-right: 0.5rem;
    font-size: 1.2em;
    vertical-align: middle;
}

/* Status dropdown for task nodes */
.status-dropdown {
    margin-right: 0.5rem;
    font-size: 1.2em;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    background-color: #fff;
    cursor: pointer;
}

/* Flexbox layout for task titles with status dropdown */
/* baseline, not flex-start: star, dropdown and title differ in height, so
   top-aligning them leaves their glyphs at different heights */
/* node title: star/status/icon, then title text in its own column so wrapped
   lines and the "also named" line align with the title */
h1.p-name {
    display: flex;
    align-items: baseline;
    gap: 0;
}

h1.p-name .title-text {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h1.p-name .title-icon {
    margin-right: 0.3em;
}

/* "(Also named X: +N)" under the title, a bit smaller than body text */
h1.p-name .name-matches {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
}

/* upper-right nav links on node pages (e.g. <tasks>), like FrontPage's sidebar */
.node-nav-links {
    float: right;
    margin: 0 0 0 1em;
}

/* Add Child form styling */
.add-child-form {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
    margin: 1.5rem 0;
    background-color: #f8f9fa;
}

.add-child-form h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: #333;
}

/* Collapsible sections (Add Child form, raw node_data): no native marker,
   our ▶ arrow turns down when open */
.add-child-form summary, .raw-data summary {
    list-style: none;
    cursor: pointer;
}

.add-child-form summary::-webkit-details-marker, .raw-data summary::-webkit-details-marker {
    display: none;
}

.add-child-form:not([open]) h3 {
    margin-bottom: 0;
}

.add-child-form summary .expand-tree, .raw-data summary .expand-tree {
    display: inline-block;
    transition: transform 0.15s;
}

.add-child-form[open] summary .expand-tree, .raw-data[open] summary .expand-tree {
    transform: rotate(90deg);
}

.expand-tree[onclick] { /* tree arrows on the node page */
    display: inline-block;
    transition: transform 0.15s;
}

.expand-tree.open {
    transform: rotate(90deg);
}

.raw-data summary {
    color: #666;
}

.add-child-form .form-group {
    margin-bottom: 1rem;
}

.add-child-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.add-child-form .form-control {
    width: 100%;
    max-width: 600px;
}

.add-child-form textarea.form-control {
    resize: vertical;
}

/* Markdown tables in rendered node bodies (node page, FrontPage cards/sidebars) */
.e-content table, .card-body table {
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.e-content th, .e-content td, .card-body th, .card-body td {
    border: 1px solid #ccc;
    padding: 0.25rem 0.5rem;
    vertical-align: top;
}

.e-content th, .card-body th {
    background-color: #f5f5f5;
}

/* EasyMDE editor in the Add Child form: same width as the other fields */
.add-child-form .EasyMDEContainer {
    max-width: 600px;
}

/* h1 arrow that hides/shows the node body (private spaces) */
h1.p-name .body-toggle {
    font-size: 0.5em;
    vertical-align: middle;
}

/* Parent / Blocked by / Blocks lines on the node page, with their x and [+] controls */
.relation-line {
    margin-bottom: 1rem;
}

.relation-line .rel-remove, .relation-line .rel-add {
    border: none;
    background: none;
    padding: 0 0.2em;
    color: #999;
    cursor: pointer;
}

.relation-line .rel-remove:hover, .relation-line .rel-add:hover {
    color: #c00;
}

.relation-line .rel-add:hover {
    color: #0a0;
}

.relation-line .rel-add-form {
    display: inline;
}

.relation-line .rel-error {
    color: #c00;
    margin-left: 0.5em;
}

.relation-line .rel-add-submit {
    font-size: 0.85em;
    padding: 0 0.5em;
    margin-left: 0.2em;
}