/*
 * Propus huisstijl theme — generated from Propus_Kleurcodes brand guide.
 *
 *   Blauw 1   #c8dcd8   light mint      (subtle backgrounds, highlights)
 *   Blauw 2   #90b8b7   seafoam         (lines, secondary elements)
 *   Blauw 3   #217d82   teal            (primary / selection)
 *   Blauw 4   #08303c   dark navy       (text, emphasis)
 *   Oker geel #d78f21   ochre           (accent, drag/pick, peer reviews)
 */
:root {
    color-scheme: light;

    --propus-mint: #c8dcd8;
    --propus-seafoam: #90b8b7;
    --propus-teal: #217d82;
    --propus-navy: #08303c;
    --propus-ochre: #d78f21;

    /* legacy aliases (older propus.css naming) */
    --propus-blue: var(--propus-teal);
    --propus-orange: var(--propus-ochre);
    --propus-darkblue: var(--propus-navy);

    --scrollbar-thumb: var(--propus-seafoam);
    --scrollbar-track: #e9f1ef;
    --scrollbar-border: #08303c11;

    --background: #f4f8f7;

    --background-color: #f4f8f7;
    --background-highlight: var(--propus-mint);
    --background-select: var(--propus-teal);
    --background-text: var(--propus-navy);
    --background-select-text: white;

    --card-highlight: var(--propus-mint);
    --card-select: var(--propus-teal);

    --panel-color: #ffffff;
    --panel-header: #ffffff;
    --panel-highlight: #c8dcd855;
    --panel-shadow: 0px 2px 3px rgba(8, 48, 60, 0.16);

    --hover-color: #90b8b733;
    --dragover-color: var(--propus-ochre);
    --pickable-color: var(--propus-ochre);
    --text-color: var(--propus-navy);
    --text-highlight: var(--propus-navy);
    --text-dimmed: #567a80;
    --text-select: white;
    --toolbar-color: #d9e7e4;
    --amounts-color: var(--propus-navy);
    --amounts-underline: var(--propus-teal);
    --description-color: #6d8d92;
    --line-color: var(--propus-seafoam);
    --date-color: var(--propus-teal);

    /* signal colors */
    --color-lightyellow: #dfd43f;
    --color-yellow: #df9800;
    --color-orange: #d56e00;
    --color-selectorange: #aa4100;
    --color-turkoise: #00c59e;
    --color-aqua: #0098ac;
    --color-lightblue: #009ff5;
    --color-blue: #0068bd;
    --color-selectblue: #add6ff;
    --color-darkblue: #000080;
    --color-lightgreen: #4d9b23;
    --color-green: #1d5c00;
    --color-lightpink: #b534aa;
    --color-pink: #770048;
    --color-lightred: #c02b2b;
    --color-red: #800000;
    --color-violet: #1651b6;
    --color-lightgray: #d4d4d4;
    --color-gray: #c8c8c8;
    --color-darkgray: #808080;

    --chip-height: var(--feature-size);

    /* planning module vars */
    --activitylog-background: white;
    --activitylog-dogear: 32px;
    --activitylog-base-color: var(--propus-teal);
    --peerreview-base-color: var(--propus-ochre);
}

/* special coloring */

/* Brand chevrons (from the Propus brand guide) at the bottom of the menu */
.Sidebar.column {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='220' viewBox='0 0 180 220'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'%3E%3Cpolyline points='36,18 70,52 36,86' stroke='%23c8dcd8'/%3E%3Cpolyline points='16,98 50,132 16,166' stroke='%23217d82'/%3E%3Cpolyline points='78,134 44,168 78,202' stroke='%2390b8b7'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat left 10px bottom -40px;
    background-size: 110px auto;
    padding-bottom: 140px;
}

.ActivityLog {
    background: white !important;
}
.Activities {
    background: white !important;
    border: none;
}
/* user input gui */
div:has(+ .Activities) {
    padding: 16px;
}

.filter {
    border-radius: 100px;
    border: 2px solid var(--propus-teal);
    background-color: var(--panel-color);
    color: var(--text-color);
    box-sizing: border-box;
    height: var(--feature-size);
    flex-shrink: 0;
}
.filter.selected {
    background-color: var(--propus-teal);
    color: var(--text-select);
}

.filter_blue {
    border-radius: 100px;
    border: 2px solid var(--propus-ochre);
    background-color: var(--panel-color);
    color: var(--text-color);
    box-sizing: border-box;
    height: var(--feature-size);
}
.filter_blue.selected {
    background-color: var(--propus-ochre);
    color: var(--text-select);
}

.Prose {
    background: white;
    border: none;
    padding: 1em;
    flex: none !important;
    box-shadow: none;
    color: var(--text-dimmed);
    margin-bottom: -2px;
}