/* Core */

/* Global variables. */
:root {
    /* SoG Fonts */
    --title-font: "Montserrat", sans-serif;
    --heading-font: "Georgia", serif;
    --body-font: "Montserrat", sans-serif;
    --mono-font:
        Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

    /* SoG Colours */
    --sog-teal: #1b7679;
    --sog-organge: #ea8651;
    --sog-yellow: #fccf61;

    /* Theme Overrides */
    --bs-body-font-family: var(--body-font);

    --theme-primary: var(--sog-teal);
    --theme-secondary: var(--sog-organge);
    --theme-danger: #aa0e3a;
    --theme-warning: var(--sog-yellow);
    --theme-info: #9ad1d4;
    --theme-success: #2fbf71;

    /*
    --theme-light: tbc;
    --theme-dark: tbc;
    */
}

/* Icons */
.material-symbols-outlined {
    display: inline-flex;
    vertical-align: text-bottom;
    font-size: 18px;
}

/* Sidebar and Nav */

#sidebar {
    border-right: solid 2px #f4f4f4;
    padding-top: 2rem;
}

.sog-nav {
    padding-left: 0;
}

.sog-nav li {
    list-style: none;
    padding-bottom: 0;
}
.sog-nav a {
    padding: 20px;
    border-bottom: solid 2px #f4f4f4;
    color: var(--theme-dark-400);
    display: block;
    transition: background 0.1s ease-in-out;
    text-decoration: none;
}

.sog-nav .sog-nav-header {
    padding: 20px 20px 5px 20px;
    /*  border-bottom: solid 2px var(--light-2);*/
    color: var(--theme-dark-400);
    display: block;
    text-decoration: none;
    font-weight: bold;
}

.sog-nav .sog-nav-subheader {
    padding: 10px 20px 5px 30px;
    color: var(--theme-dark-400);
    display: block;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
}

.sog-nav .sog-nav-subitem a {
    padding-left: 40px;
}

.sog-nav a:hover {
    background: #f4f4f4;
}
.sog-nav a:visited {
    color: var(--theme-dark-400);
}

/* Page title component */

.pagetitle {
    border-bottom: solid 2px #f4f4f4;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.pagetitle h1 {
    margin: 0.5rem 0;
    color: var(--theme-secondary);
    font-size: 2.6rem;
    font-weight: bold;
}

.pagetitle .page-helptext {
    font-style: italic;
    font-size: 1rem;
}

.tabular-nums {
    font-feature-settings: "tnum";
}

/* Read-only fields (disabled inputs/textareas on edit forms) */
input.readonly-field:disabled,
textarea.readonly-field:disabled {
    background-color: #d7dce1 !important;
    color: #495057 !important;
    -webkit-text-fill-color: #495057 !important;
    border-color: #adb5bd !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* HEM Reports */

/* All rows get a transparent left border to maintain alignment */
.table.hem-report-table > tbody > tr > td:first-child {
    border-left: 12px solid transparent;
}

/* 10 colours × 3 patterns = 30 highlight variations for overlap indicators */
tr.hem-hl-0  { --hl-color: #e91e63; }
tr.hem-hl-1  { --hl-color: #3f51b5; }
tr.hem-hl-2  { --hl-color: #00bcd4; }
tr.hem-hl-3  { --hl-color: #4caf50; }
tr.hem-hl-4  { --hl-color: #ff9800; }
tr.hem-hl-5  { --hl-color: #9c27b0; }
tr.hem-hl-6  { --hl-color: #f44336; }
tr.hem-hl-7  { --hl-color: #009688; }
tr.hem-hl-8  { --hl-color: #795548; }
tr.hem-hl-9  { --hl-color: #607d8b; }
tr.hem-hl-10 { --hl-color: #e91e63; }
tr.hem-hl-11 { --hl-color: #3f51b5; }
tr.hem-hl-12 { --hl-color: #00bcd4; }
tr.hem-hl-13 { --hl-color: #4caf50; }
tr.hem-hl-14 { --hl-color: #ff9800; }
tr.hem-hl-15 { --hl-color: #9c27b0; }
tr.hem-hl-16 { --hl-color: #f44336; }
tr.hem-hl-17 { --hl-color: #009688; }
tr.hem-hl-18 { --hl-color: #795548; }
tr.hem-hl-19 { --hl-color: #607d8b; }
tr.hem-hl-20 { --hl-color: #e91e63; }
tr.hem-hl-21 { --hl-color: #3f51b5; }
tr.hem-hl-22 { --hl-color: #00bcd4; }
tr.hem-hl-23 { --hl-color: #4caf50; }
tr.hem-hl-24 { --hl-color: #ff9800; }
tr.hem-hl-25 { --hl-color: #9c27b0; }
tr.hem-hl-26 { --hl-color: #f44336; }
tr.hem-hl-27 { --hl-color: #009688; }
tr.hem-hl-28 { --hl-color: #795548; }
tr.hem-hl-29 { --hl-color: #607d8b; }

/* Solid pattern (0–9) */
tr.hem-hl-0 > td:first-child,
tr.hem-hl-1 > td:first-child,
tr.hem-hl-2 > td:first-child,
tr.hem-hl-3 > td:first-child,
tr.hem-hl-4 > td:first-child,
tr.hem-hl-5 > td:first-child,
tr.hem-hl-6 > td:first-child,
tr.hem-hl-7 > td:first-child,
tr.hem-hl-8 > td:first-child,
tr.hem-hl-9 > td:first-child {
    border-left: 12px solid var(--hl-color) !important;
}

/* Dashed + striped shared setup (10–29) */
tr.hem-hl-10 > td:first-child, tr.hem-hl-11 > td:first-child,
tr.hem-hl-12 > td:first-child, tr.hem-hl-13 > td:first-child,
tr.hem-hl-14 > td:first-child, tr.hem-hl-15 > td:first-child,
tr.hem-hl-16 > td:first-child, tr.hem-hl-17 > td:first-child,
tr.hem-hl-18 > td:first-child, tr.hem-hl-19 > td:first-child,
tr.hem-hl-20 > td:first-child, tr.hem-hl-21 > td:first-child,
tr.hem-hl-22 > td:first-child, tr.hem-hl-23 > td:first-child,
tr.hem-hl-24 > td:first-child, tr.hem-hl-25 > td:first-child,
tr.hem-hl-26 > td:first-child, tr.hem-hl-27 > td:first-child,
tr.hem-hl-28 > td:first-child, tr.hem-hl-29 > td:first-child {
    position: relative;
    border-left: 12px solid transparent !important;
}
tr.hem-hl-10 > td:first-child::before, tr.hem-hl-11 > td:first-child::before,
tr.hem-hl-12 > td:first-child::before, tr.hem-hl-13 > td:first-child::before,
tr.hem-hl-14 > td:first-child::before, tr.hem-hl-15 > td:first-child::before,
tr.hem-hl-16 > td:first-child::before, tr.hem-hl-17 > td:first-child::before,
tr.hem-hl-18 > td:first-child::before, tr.hem-hl-19 > td:first-child::before,
tr.hem-hl-20 > td:first-child::before, tr.hem-hl-21 > td:first-child::before,
tr.hem-hl-22 > td:first-child::before, tr.hem-hl-23 > td:first-child::before,
tr.hem-hl-24 > td:first-child::before, tr.hem-hl-25 > td:first-child::before,
tr.hem-hl-26 > td:first-child::before, tr.hem-hl-27 > td:first-child::before,
tr.hem-hl-28 > td:first-child::before, tr.hem-hl-29 > td:first-child::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 12px;
}

/* Dashed pattern (10–19) */
tr.hem-hl-10 > td:first-child::before, tr.hem-hl-11 > td:first-child::before,
tr.hem-hl-12 > td:first-child::before, tr.hem-hl-13 > td:first-child::before,
tr.hem-hl-14 > td:first-child::before, tr.hem-hl-15 > td:first-child::before,
tr.hem-hl-16 > td:first-child::before, tr.hem-hl-17 > td:first-child::before,
tr.hem-hl-18 > td:first-child::before, tr.hem-hl-19 > td:first-child::before {
    background: repeating-linear-gradient(
        180deg,
        var(--hl-color), var(--hl-color) 8px,
        #fff 8px, #fff 12px
    );
}

/* Striped pattern (20–29) */
tr.hem-hl-20 > td:first-child::before, tr.hem-hl-21 > td:first-child::before,
tr.hem-hl-22 > td:first-child::before, tr.hem-hl-23 > td:first-child::before,
tr.hem-hl-24 > td:first-child::before, tr.hem-hl-25 > td:first-child::before,
tr.hem-hl-26 > td:first-child::before, tr.hem-hl-27 > td:first-child::before,
tr.hem-hl-28 > td:first-child::before, tr.hem-hl-29 > td:first-child::before {
    background: repeating-linear-gradient(
        180deg,
        var(--hl-color), var(--hl-color) 3px,
        #fff 3px, #fff 6px
    );
}

/* Per Bucket History — sticky columns */
.per-bucket-table-wrap {
    overflow-x: auto;
}
.per-bucket-table {
    border-collapse: separate;
    border-spacing: 0;
}
.per-bucket-table th,
.per-bucket-table td {
    white-space: nowrap;
}
.per-bucket-table .sticky-col-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 2px solid #dee2e6;
}
.per-bucket-table thead .sticky-col-left {
    z-index: 3;
    background: #fff;
}
.per-bucket-table .sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    border-left: 2px solid #dee2e6;
}
.per-bucket-table thead .sticky-col-right {
    z-index: 3;
    background: #fff;
}
.per-bucket-table .metric-header {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    vertical-align: bottom;
    white-space: nowrap;
    padding: 0.5rem 0.25rem;
}
.per-bucket-table .metric-header .sort-icon {
    display: inline-block;
    writing-mode: horizontal-tb;
    transform: rotate(180deg);
}

.per-bucket-table .border-month {
    border-left: 2px solid #888 !important;
}
.per-bucket-table .border-year {
    border-left: 3px solid #333 !important;
}
.per-bucket-table td:has(+ td.border-month),
.per-bucket-table td:has(+ td.border-year) {
    border-right: none !important;
}
.per-bucket-table .metric-header.border-month {
    border-left: none !important;
    border-right: 2px solid #888 !important;
}
.per-bucket-table .metric-header.border-year {
    border-left: none !important;
    border-right: 3px solid #333 !important;
}
.per-bucket-table .metric-header:has(+ .border-month),
.per-bucket-table .metric-header:has(+ .border-year) {
    border-left: none !important;
}
.per-bucket-table thead tr:nth-child(2) th[colspan] + th[colspan] {
    border-left: none !important;
}
.per-bucket-table thead tr:nth-child(2) th[colspan]:has(+ th[colspan]) {
    border-right: none !important;
}
.per-bucket-table thead tr:nth-child(1) th[colspan] + th[colspan] {
    border-left: none !important;
}
.per-bucket-table thead tr:nth-child(1) th[colspan]:has(+ th[colspan]) {
    border-right: none !important;
}
.per-bucket-table .metric-header.border-month::after,
.per-bucket-table .metric-header.border-year::after {
    content: '';
    position: absolute;
    right: 0;
    height: 3rem;
    bottom: -3rem;
    z-index: 4;
}
.per-bucket-table .metric-header.border-month::after {
    width: 2px;
    background: #888;
}
.per-bucket-table .metric-header.border-year::after {
    width: 3px;
    background: #333;
    height: 5rem;
    bottom: -5rem;
}

/* Bucket criteria formset grid */
.criteria-grid {
    display: grid;
    grid-template-columns: max-content 80px max-content auto min-content;
    align-items: center;
    gap: 0.5rem;
}
.criteria-row[data-deleted="true"] { display: none; }
.criteria-row:not([data-deleted="true"]):not(:has(~ .criteria-row:not([data-deleted="true"]))) .criteria-conjunction {
    visibility: hidden;
}
#metric-formset-container:not(:has(.criteria-row:not([data-deleted="true"]) ~ .criteria-row:not([data-deleted="true"]))) .remove-criteria-btn {
    display: none !important;
}

.toastui-editor-defaultUI {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    font-family: var(--body-font);
    overflow: hidden;
}

.toastui-editor-defaultUI:focus-within {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem rgba(27, 118, 121, 0.25);
}

.toastui-editor-toolbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.toastui-editor-mode-switch {
    display: none !important;
}

.toastui-editor-defaultUI .toastui-editor-ww-container .ProseMirror {
    font-family: var(--body-font);
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
}

.rendered-markdown {
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.5;
}

.rendered-markdown a {
    color: var(--theme-primary);
    text-decoration: underline;
}

.rendered-markdown a:hover {
    color: var(--theme-primary-600);
}

.rendered-markdown ul,
.rendered-markdown ol {
    padding-left: 2rem;
}

.rendered-markdown p:last-child {
    margin-bottom: 0;
}

.sortable-header a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    cursor: pointer;
}
.sortable-header a:hover {
    color: var(--bs-primary);
}
.sortable-header .sort-icon {
    font-size: 1rem;
    vertical-align: middle;
    opacity: 0.8;
}
.sortable-header a:not(.active-sort) .sort-icon {
    opacity: 0.3;
}

.hem-overlap-icon {
    font-size: 18px;
    vertical-align: middle;
    color: #757575;
    margin-right: 4px;
}

.toastui-editor-toolbar-icons.underline-button {
    background-image: none;
    font-weight: bold;
    text-decoration: underline;
    font-size: 14px;
}

.toastui-editor-toolbar-icons.underline-button.active {
    color: #4b96e6;
}