/* chart-notes.css - chart notes on the trend charts (js/charts/chart-notes.js,
   lib/chart-notes.php): note lines in the line tooltip, the popover to read /
   add / edit, the bar for important notes and the Notes page table bits.
   Popover = the .ofo-mf-panel look (components/multi-filter.css); bar = the
   grey .ofo-notice (components/special-notice.css). Always loaded.

   @author Sander Tamaela
   @created 2026-11-12
   @modified 2026-11-12
*/

/* Tooltip lines (inside .vis-line-tt, components/line-chart.css) */
.ofo-cn-tt-list {
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tl-f3f4f6, #f3f4f6);
}
.ofo-cn-tt {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 11.5px; line-height: 1.45; color: var(--tc-6b7280, #6b7280);
}
.ofo-cn-tt.more { padding-left: 11px; }
/* The mark: dot = by a person, diamond = automatic (same shapes as under the axis). */
.ofo-cn-tt-m {
    flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--tb-9ca3af, #9ca3af); transform: translateY(-1px);
}
.ofo-cn-tt-m.sys { border-radius: 0; width: 5px; height: 5px; transform: translateY(-1px) rotate(45deg); }

/* "Add note" / "Notes (n)" button at the hovered period (a .btn-secondary .btn-sm). */
.ofo-cn-addbtn {
    position: absolute; z-index: 6;
    padding: 3px 10px; font-size: 12px; line-height: 1.4; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}
.ofo-cn-addbtn[hidden] { display: none; }

/* Popover */
.ofo-cn-pop {
    position: absolute; z-index: 20;
    width: 300px; max-width: 100%;
    background: var(--tb-ffffff, #ffffff);
    border: 1px solid var(--tl-e5e7eb, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 10px 12px 8px;
    font-size: 13px; color: var(--tc-374151, #374151);
}
.ofo-cn-pop-h {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--tc-111827, #111827);
    margin-bottom: 6px;
}
.ofo-cn-x {
    border: none; background: none; padding: 2px; cursor: pointer; line-height: 0;
    color: var(--tc-6b7280, #6b7280); border-radius: 4px;
}
.ofo-cn-x:hover { color: var(--tc-111827, #111827); }
.ofo-cn-x:focus-visible, .ofo-cn-act:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

.ofo-cn-list { list-style: none; margin: 0; padding: 0; }
.ofo-cn-item { padding: 6px 0; border-top: 1px solid var(--tl-f3f4f6, #f3f4f6); }
.ofo-cn-item:first-child { border-top: none; padding-top: 0; }
.ofo-cn-body { display: flex; align-items: baseline; gap: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.ofo-cn-link { margin: 2px 0 0 11px; font-size: 12px; overflow-wrap: anywhere; }
.ofo-cn-meta { margin: 2px 0 0 11px; font-size: 11px; color: var(--tc-6b7280, #6b7280); }
.ofo-cn-actions { margin: 2px 0 0 11px; display: flex; gap: 12px; }

/* Text buttons (Edit, Delete, + Link, + Add a note) */
.ofo-cn-act {
    border: none; background: none; padding: 0; cursor: pointer; font: inherit;
    font-size: 12px; color: var(--tc-2563eb, #2563eb);
}
.ofo-cn-act:hover { text-decoration: underline; }
.ofo-cn-new { margin: 6px 0 2px; }

.ofo-cn-form { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ofo-cn-lbl { font-size: 11px; font-weight: 600; color: var(--tc-6b7280, #6b7280); margin-top: 4px; }
.ofo-cn-in {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 6px 8px; border: 1px solid var(--tl-d1d5db, #d1d5db); border-radius: 6px;
    background: var(--tb-ffffff, #ffffff); color: var(--tc-111827, #111827);
}
.ofo-cn-in:focus { outline: var(--focus-ring); outline-offset: 0; border-color: var(--tl-93c5fd, #93c5fd); }
textarea.ofo-cn-in { resize: vertical; min-height: 60px; }
.ofo-cn-count { font-size: 11px; color: var(--tc-9ca3af, #9ca3af); text-align: right; }
.ofo-cn-addlink { align-self: flex-start; }
.ofo-cn-urlrow[hidden] { display: none; }
.ofo-cn-urlrow { display: flex; flex-direction: column; gap: 4px; }
/* On/off choices: the .v2-toggle switch (components/toggle.css) with its text beside it. */
.ofo-cn-switch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tc-4b5563, #4b5563); margin-top: 6px; }
.ofo-cn-switch .v2-toggle { flex: 0 0 auto; }
.ofo-cn-err { font-size: 12px; color: var(--tc-b91c1c, #b91c1c); min-height: 0; }
.ofo-cn-err:empty { display: none; }
.ofo-cn-form-actions { display: flex; gap: 8px; margin-top: 6px; }
/* .btn sets display, which beats the hidden attribute. */
.ofo-cn-form-actions [hidden] { display: none; }
.ofo-cn-foot {
    margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--tl-f3f4f6, #f3f4f6);
    font-size: 12px;
}

/* Bar for important notes: one line of the grey .ofo-notice. */
.ofo-cn-bar { padding: 8px 12px 8px 16px; }
.ofo-cn-bar-row { display: flex; align-items: flex-start; gap: 12px; }
.ofo-cn-bar-text { flex: 1 1 auto; min-width: 0; }
.ofo-cn-bar-more {
    border: none; background: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--tc-2563eb, #2563eb);
}
.ofo-cn-bar-more:hover { text-decoration: underline; }
.ofo-cn-bar-close {
    flex: 0 0 auto; border: none; background: none; padding: 3px; cursor: pointer; line-height: 0;
    color: var(--tc-6b7280, #6b7280); border-radius: 4px;
}
.ofo-cn-bar-close:hover { color: var(--tc-111827, #111827); }
.ofo-cn-bar-more:focus-visible, .ofo-cn-bar-close:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.ofo-cn-bar-list { margin: 6px 0 2px; padding-left: 18px; }
.ofo-cn-bar-list[hidden] { display: none; }
.ofo-cn-bar-list li { margin: 2px 0; }

/* "Show notes in charts" switch inside a "How to read" entry. */
.ofo-cn-toggle { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--tc-4b5563, #4b5563); }

/* Notes page (chart-notes.php): add form and table (.bset-table values, pages/brand-setup.css). */
.ofo-cn-pageform {
    display: grid; grid-template-columns: 160px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px; align-items: start;
}
@media (max-width: 900px) { .ofo-cn-pageform { grid-template-columns: minmax(0, 1fr); } }
.ofo-cn-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ofo-cn-field > label { font-size: 12px; font-weight: 600; color: var(--tc-4b5563, #4b5563); }
.ofo-cn-field--checks { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.ofo-cn-field--checks .ofo-cn-switch { margin-top: 0; font-size: 13px; }
.ofo-cn-opt { font-weight: 400; color: var(--tc-9ca3af, #9ca3af); }
.ofo-cn-pageform .ofo-cn-err, .ofo-cn-pageform .ofo-cn-form-actions { grid-column: 1 / -1; }
.ofo-cn-pageform .ofo-cn-form-actions { margin-top: 0; }

.ofo-cn-tablebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ofo-cn-tablebar .ofo-cn-toggle { margin-top: 0; }
.ofo-cn-tablebar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ofo-cn-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 0; }
.ofo-cn-table th {
    text-align: left; padding: 8px 12px; font-size: 12px; color: var(--tc-6b7280, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--tl-e5e7eb, #e5e7eb);
    background: var(--tb-ffffff, #ffffff); white-space: nowrap;
}
.ofo-cn-table td { padding: 9px 12px; border-bottom: 1px solid var(--tl-f3f4f6, #f3f4f6); vertical-align: top; }
.ofo-cn-table tbody tr:nth-child(odd),
.ofo-cn-table tbody tr:nth-child(even) { background: var(--tb-ffffff, #ffffff); }
.ofo-cn-table tbody tr:hover { background: var(--tb-f9fafb, #f9fafb); }
.ofo-cn-table tr:last-child td { border-bottom: none; }
.ofo-cn-table .ofo-cn-link { margin-left: 0; }
.ofo-cn-date { white-space: nowrap; font-weight: 500; color: var(--tc-111827, #111827); }
.ofo-cn-text { min-width: 240px; overflow-wrap: anywhere; }
.ofo-cn-muted { color: var(--tc-6b7280, #6b7280); font-weight: 400; }
.ofo-cn-rowact { white-space: nowrap; text-align: right; }
.ofo-cn-rowact .ofo-cn-act + .ofo-cn-act { margin-left: 12px; }
.ofo-cn-table .ofo-chip + .ofo-chip { margin-left: 4px; }