/*
 * Harbor Light Theme for TriliumNext
 *
 * Derived from the current default (next) theme via #appThemeBase=next-light.
 * Fixed light variant (no automatic light/dark switching for user themes).
 *
 * Harbor light palette (from HANCORE-linux/omarchy-harbor-theme, MIT):
 *   bg #dfe4c4 / #d0d6b4 / #c3c9a6 / #e8ecd0   fg #1c2d28
 *   accents: red #b14752 green #556753 clay #dc8164
 *            blue #4c6c94 purple #8a5b81 cyan #3d727d accent #5e81ac
 */

#trilium-app {
    --theme-style: light;

    /* Main surfaces */
    --main-background-color: #dfe4c4;
    --main-text-color: #1c2d28;
    --main-border-color: #c3c9a6;
    --subtle-border-color: #d0d6b4;
    --dropdown-border-color: #c3c9a6;
    --dropdown-shadow-opacity: 0.5;

    /* Accented / highlight */
    --accented-background-color: #d0d6b4;
    --more-accented-background-color: #c3c9a6;

    /* Cards & dialogs */
    --card-background-color: #d0d6b4;
    --card-background-hover-color: #c3c9a6;
    --card-border-color: #c3c9a6;
    --tool-dialog-background-color: #e8ecd0;
    --modal-background-color: #e8ecd0;
    --modal-border-color: #c3c9a6;

    /* Text & muted */
    --muted-text-color: #556753;
    --menu-text-color: #1c2d28;
    --menu-background-color: #d0d6b4;
    --menu-background-color-no-backdrop: #d0d6b4;

    /* Links */
    --link-color: #4c6c94;
    --link-hover-color: #3d727d;
    --link-hover-background: #3d727d24;

    /* Inputs */
    --input-background-color: #c3c9a660;
    --input-text-color: #1c2d28;
    --input-placeholder-color: #55675380;
    --input-hover-background: #b3ba9660;
    --input-focus-outline-color: #4c6c94;
    --input-focus-background: #c3c9a650;
    --input-focus-color: #1c2d28;
    --input-action-button-color: #7d8794;
    --input-action-button-hover: #1c2d28;

    /* Selection */
    --selection-background-color: #5e81ac;
    --hover-item-text-color: #1c2d28;
    --hover-item-background-color: #d0d6b4;
    --active-item-text-color: #1c2d28;
    --active-item-background-color: #c3c9a6;

    /* Left pane / launcher */
    --left-pane-background-color: #d0d6b4;
    --left-pane-text-color: #556753;
    --left-pane-icon-color: #4a5b52;
    --left-pane-item-hover-background: #c3c9a6;
    --left-pane-item-selected-background: #c3c9a6;
    --left-pane-item-selected-color: #1c2d28;
    --launcher-pane-background-color: #d0d6b4;
    --launcher-pane-text-color: #556753;
    --launcher-pane-vert-background-color: #d0d6b4;
    --launcher-pane-vert-text-color: #556753;
    --launcher-pane-horiz-background-color: #d0d6b4;
    --launcher-pane-horiz-text-color: #556753;

    /* Tabs & breadcrumb / window backgrounds */
    --window-background-color-bgfx: #d0d6b4;
    --root-background: #d0d6b4;
    --tab-background-color: #d0d6b4;
    --note-split-background-color: #dfe4c4;
    --center-pane-background-color-bgfx: #dfe4c4;
    --launcher-pane-horiz-background-color-bgfx: #d0d6b4;
    --center-pane-horiz-layout-background-color-bgfx: #dfe4c4;
    --center-pane-vert-layout-background-color-bgfx: #dfe4c4;

    /* Tabs */
    --active-tab-background-color: #e8ecd0;
    --active-tab-text-color: #1c2d28;
    --inactive-tab-background-color: #dfe4c4;
    --inactive-tab-text-color: #556753;
    --tab-close-button-hover-background: #c3c9a6;
    --tab-close-button-hover-color: #b14752;

    /* Right pane */
    --right-pane-background-color: #d0d6b4;
    --right-pane-heading-color: #1c2d28;
    --right-pane-item-hover-background: #c3c9a6;
    --right-pane-item-hover-color: #1c2d28;

    /* Bottom panel */
    --bottom-panel-background-color: #d0d6b4;
    --bottom-panel-title-bar-background-color: #dfe4c4;

    /* Status bar */
    --status-bar-border-color: #c3c9a6;

    /* Code / inline code */
    --inline-code-background-color: #d0d6b4;
    --inline-code-border-color: #c3c9a6;
    --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

    /* Note icons */
    --note-icon-background-color: #d0d6b4;
    --note-icon-color: #1c2d28;

    /* Floating buttons */
    --floating-button-background-color: #d0d6b4;
    --floating-button-color: #1c2d28;
    --floating-button-hover-background: #c3c9a6;
    --floating-button-hover-color: #1c2d28;

    /* Tooltips */
    --tooltip-background-color: #d0d6b4;
    --tooltip-foreground-color: #1c2d28;

    /* Scrollbar */
    --scrollbar-thumb-color: #c3c9a6;
    --scrollbar-thumb-hover-color: #b3ba96;
    --scrollbar-background-color: #d0d6b4;

    /* Checkboxes / tasks */
    --task-checkbox-done-color: #556753;
    --task-checkbox-glyph-color: #1c2d28;
    --task-checkbox-without-state-background: #c3c9a6;
    --task-checkbox-with-state-background: #5e81ac;

    /* Mermaid */
    --mermaid-theme: light;

    /* Buttons */
    --cmd-button-background-color: #c3c9a6a0;
    --cmd-button-text-color: #1c2d28;
    --cmd-button-hover-background-color: #b3ba96a0;
    --cmd-button-hover-text-color: #1c2d28;
    --icon-button-hover-background: #c3c9a6;
    --icon-button-hover-color: #1c2d28;

    /* Logs */
    --log-error-color: #b14752;
    --log-info-color: #4c6c94;
    --log-slow-color: #dc8164;
    --log-success-color: #556753;

    /* Badges */
    --badge-background-color: #c3c9a6;
    --badge-text-color: #1c2d28;

    /* CKEditor editor dropdowns / panels (no yellow) */
    --ck-color-base-foreground: #c3c9a6;
    --ck-color-base-background: #dfe4c4;
    --ck-color-dialog-background: #dfe4c4;
    --ck-color-dropdown-panel-background: #dfe4c4;
    --ck-color-dropdown-panel-border: #c3c9a6;
    --ck-color-list-background: #dfe4c4;
    --ck-color-list-button-hover-background: #c3c9a6;
    --ck-color-list-button-on-background: #c3c9a6;
    --ck-color-button-default-background: #d0d6b4;
    --ck-color-button-default-hover-background: #c3c9a6;
    --ck-color-button-on-background: #c3c9a6;
    --ck-color-button-on-hover-background: #b3ba96;
    --ck-color-button-action-background: #c3c9a6;
    --ck-color-button-action-hover-background: #b3ba96;
    --ck-color-input-background: #dfe4c4;
    --ck-editor-toolbar-button-on-background: #c3c9a6;
    --ck-editor-toolbar-button-on-color: #1c2d28;
    --ck-editor-toolbar-dropdown-button-open-background: #d0d6b4;
}

/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */
:root {
    --menu-text-color: #1c2d28;
    --menu-background-color: #dfe4c4;
    --menu-background-color-no-backdrop: #dfe4c4;
    --menu-item-icon-color: #7d8794;
    --menu-item-disabled-opacity: 0.5;
    --menu-item-keyboard-shortcut-color: #7d879490;
    --menu-item-arrow-color: #7d8794a3;
    --menu-item-delimiter-color: #c3c9a6;
    --menu-item-group-header-color: #4a5b52;
    --menu-section-background-color: #dfe4c4;
    --menu-hover-item-background-color: #c3c9a6;
    --menu-hover-item-text-color: #1c2d28;
    --hover-item-background-color: #c3c9a6;
    --active-item-background-color: #c3c9a6;
    --dropdown-border-color: #c3c9a6;
    --dropdown-item-icon-destructive-color: #b14752;

    /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */
    --ck-color-base-text: #1c2d28;
    --ck-color-text: #1c2d28;
    --ck-color-base-foreground: #c3c9a6;
    --ck-color-base-background: #dfe4c4;
    --ck-color-dialog-background: #dfe4c4;
    --ck-color-dropdown-panel-background: #dfe4c4;
    --ck-color-dropdown-panel-border: #c3c9a6;
    --ck-color-list-background: #dfe4c4;
    --ck-color-list-button-hover-background: #c3c9a6;
    --ck-color-list-button-on-background: #c3c9a6;
    --ck-color-list-button-on-text: #1c2d28;
    --ck-color-button-default-background: #d0d6b4;
    --ck-color-button-default-hover-background: #c3c9a6;
    --ck-color-button-on-background: #c3c9a6;
    --ck-color-button-on-hover-background: #b3ba96;
    --ck-color-button-action-background: #c3c9a6;
    --ck-color-button-action-hover-background: #b3ba96;
    --ck-color-input-background: #dfe4c4;
    --ck-color-input-text: #1c2d28;
    --ck-color-panel-background: #dfe4c4;
    --ck-color-toolbar-background: #d0d6b4;
}

/* Force the note-tree context menu / dropdowns to a neutral, non-yellow background. */
body.desktop .dropdown-menu,
body.desktop .dropdown-menu.tn-dropdown-menu,
body.desktop .dropdown-menu.tn-dropdown-list,
body.mobile .dropdown-menu {
    --menu-background-color: #dfe4c4 !important;
    --menu-background-color-no-backdrop: #dfe4c4 !important;
    --menu-section-background-color: #dfe4c4 !important;
    background-color: #dfe4c4 !important;
}
body.desktop .dropdown-menu::before,
body.mobile .dropdown-menu::before {
    background-color: #dfe4c4 !important;
    backdrop-filter: none !important;
}
body.desktop .dropdown-menu .dropdown-item,
body.mobile .dropdown-menu .dropdown-item {
    --custom-color: #1c2d28 !important;
    color: #1c2d28;
}
body.desktop .dropdown-menu .dropdown-item:hover,
body.desktop .dropdown-menu .dropdown-item:focus,
body.desktop .dropdown-menu .dropdown-item.active {
    background-color: #c3c9a6 !important;
    color: #1c2d28;
}

/* ============ TREELINES (Vertical tree lines) ============ */
/* Base connector lines — Harbor neutral */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) {
    border-left: 2.5px solid rgba(85, 103, 83, 0.8);
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) {
    border-left: 2.5px solid rgba(85, 103, 83, 0.5);
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR red */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) {
    border-left: 2.5px solid #b1475280;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR orange */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) {
    border-left: 2.5px solid #dc816480;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR yellow */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) {
    border-left: 2.5px solid #d8c36e80;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR green (light) */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) {
    border-left: 2.5px solid #55675380;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR green */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) {
    border-left: 2.5px solid #55675380;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR aqua/green */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) {
    border-left: 2.5px solid #3d727d80;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR aqua/cyan */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) {
    border-left: 2.5px solid #3d727d80;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR blue */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) {
    border-left: 2.5px solid #4c6c9480;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR blue/purple */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) {
    border-left: 2.5px solid #5e81ac80;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR purple */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) {
    border-left: 2.5px solid #8a5b8180;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
/* COLOR pink/magenta */
div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) {
    border-left: 2.5px solid #a95f8f80;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

/* ============ NOTE HEADER BOXES (h2-h6) ============ */
/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */
.ck-content h2 {
    background-color: rgba(94, 129, 172, 0.18);
    border-bottom: 2px solid rgba(94, 129, 172, 0.45);
    border-radius: 4px;
    padding: 0.25em 0.4em;
}
.ck-content h3 {
    background-color: rgba(85, 103, 83, 0.14);
    border-bottom: 2px solid rgba(85, 103, 83, 0.38);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}
.ck-content h4 {
    background-color: rgba(220, 129, 100, 0.14);
    border-bottom: 2px solid rgba(220, 129, 100, 0.38);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}
.ck-content h5 {
    background-color: rgba(138, 91, 129, 0.12);
    border-bottom: 2px solid rgba(138, 91, 129, 0.35);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}
.ck-content h6 {
    background-color: rgba(61, 114, 125, 0.12);
    border-bottom: 2px solid rgba(61, 114, 125, 0.35);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}

/* ============ TABLES ============ */
.ck-content table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--main-border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 1em 0;
}
.ck-content table th,
.ck-content table td {
    border: none;
    border-bottom: 1px solid var(--main-border-color);
    border-right: 1px solid var(--main-border-color);
    padding: 8px 12px;
    text-align: left;
    background-color: transparent !important;
}
.ck-content table th:last-child,
.ck-content table td:last-child {
    border-right: none;
}
.ck-content table tr:last-child td {
    border-bottom: none;
}
.ck-content table thead th {
    background-color: rgba(94, 129, 172, 0.16) !important;
    color: #1c2d28;
    font-weight: 700;
    border-bottom: 2px solid rgba(94, 129, 172, 0.40);
}
.ck-content table tbody td:first-child {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1c2d28;
    font-weight: 600;
    white-space: nowrap;
}
.ck-content table tbody tr:nth-child(even) td:not(:first-child) {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
.ck-content table tbody tr:hover td {
    background-color: rgba(94, 129, 172, 0.08) !important;
}
.ck-content table .col-hover {
    background-color: rgba(94, 129, 172, 0.08) !important;
}
.ck-content table tbody tr:hover td.col-hover,
.ck-content table thead th.col-hover {
    background-color: rgba(94, 129, 172, 0.15) !important;
}