/* GENERAL */
:root {
    --color-links: var(--color-senatical-links-lightmode);
    --color-links-active: var(--color-senatical-links-lightmode);
    --vtoggle-switch-height: 40px;
    --vtoggle-switch-width: 20px;
    --vtoggle-circle-width: 16px;
    --htoggle-switch-width: 40px;
    --htoggle-switch-height: 20px;
    --htoggle-circle-width: 16px;
    --color-body-background: white;
    --color-body-foreground: #606c76;
    --color-content-background: white;
    --color-headings: #363637;
    --color-input-foreground: var(--color-body-foreground);
    --color-links: var(--color-senatical-links-lightmode);
    --color-footer-background: gainsboro;
    --color-footer-foreground: #444;
    --color-alt-rows: #f9f9f9;
    --color-row-hover: #eaeaea;
    --color-actions-column: rgb(255,255,255,0.95);
    --color-index-shadows: gainsboro;
    --color-backtotop: rgb(0,0,0,0.1);
    --color-senatical-secondary: var(--color-senatical-secondary-lightmode);
    --color-senatical-secondary-fg: var(--color-senatical-secondary-fg-lightmode);
    --color-input-disabled: #ececec;
    --color-logo-background: var(--color-senatical-logo-background-lightmode);
    --color-clickable-labels-background: #efefef;
    --color-clickable-labels-hover: #e1e1e1;
    --color-highlight-borders: #d1d1d1;
    --color-frame-borders: gainsboro;
    --color-boxshadow: rgba(0, 0, 0, 0.4);
    --pleaserotate-fg: var(--color-body-foreground);
    --pleaserotate-bg: var(--color-body-background);
    --color-approved-comment: green;
    --color-rejected-comment: red;
    --color-chart-grid: #808080;
    --color-chart-ticks: #808080;
    --color-chart-default: #444;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --color-body-background: #2a2a2a;
        --color-body-foreground: #c7d1d9;
        --color-content-background: #2a2a2a;
        --color-headings: #d3d3d3;
        --color-links: var(--color-senatical-links-darkmode);
        --color-links-active: var(--color-senatical-links-darkmode);
        --color-footer-background: #181717;
        --color-footer-foreground: #9b9b9b;
        --color-alt-rows: #303030;
        --color-row-hover: #121212;
        --color-actions-column: rgb(76,76,76,0.95);
        --color-index-shadows: #121212;
        --color-backtotop: rgb(255,255,255,0.2);
        --color-senatical-secondary: var(--color-senatical-secondary-darkmode);
        --color-senatical-secondary-fg: var(--color-senatical-secondary-fg-darkmode);
        --color-input-disabled: #5c5c5c;
        --color-logo-background: var(--color-senatical-logo-background-darkmode);
        --color-clickable-labels-background: #343434;
        --color-clickable-labels-hover: #4e4e4e;
        --color-highlight-borders: #5e5e5e;
        --color-frame-borders: #4e4e4e;
        --color-boxshadow: rgba(0,0,0,0.9);
        --color-approved-comment: #3acd3a;
        --color-rejected-comment: #fb3636;
        --color-chart-grid: #9b9b9b;
        --color-chart-ticks: #9b9b9b;
        --color-chart-default: white;
    }
}

/* CUSTOM SCROLLBARS */
::-webkit-scrollbar {
    width: 10px; /* Width of the vertical scrollbar */
    height: 10px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.6);
    border-radius: 15px; /* Rounded corners for the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-senatical-primary);
}
/* END CUSTOM SCROLLBARS */

html {
    scroll-behavior: smooth;
}

html, body {
    min-width: auto;
    display: block;
    border: 0;
    overflow-x: clip;
    background-color: var(--color-body-background);
    color: var(--color-body-foreground);
}

html,body,nav, ul, li, a, span{
    margin: 0;
    padding:0;
}

label svg {
	margin: 5px;
}

a:hover, a:focus, a:active, label svg:hover {
    text-shadow: -1px -2px 2px rgb(0,0,0,0.2);
}

a svg, svg.hamburger, label svg {
    cursor: pointer;
    transition: all 0.2s;
}

a:hover svg, div.actionmenu svg:hover, svg.threedots:hover, svg.hamburger:hover, label:hover svg {
    transform: scale(1.1,1.1);
    filter: drop-shadow(-1px -2px 2px rgb(0 0 0 / 0.2));
}

h3 {
    font-size: clamp(16px, 3vw, 24px);
    line-height: clamp(24px, 4vw, 36px);
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    font-size: clamp(10px, 1.5vw, 14px);
    height: clamp(24px, 4vw, 36px);
    line-height: clamp(24px, 4vw, 36px);
    padding: 0 clamp(10px, 3vw, 30px);
}

.container {
    max-width: unset;
    padding: 0;
    margin: 0;
}

.content {
    box-shadow: unset;
    background: var(--color-content-background);
}

input[type='color'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='time'], input[type='email'], input[type='month'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='week'], input:not([type]), textarea, .editable-div, select {
    -webkit-appearance: none;
    border-radius: .4rem;
    box-shadow: none;
    box-sizing: inherit;
    height: 3.8rem;
    padding: .6rem 1.0rem .7rem;
    width: 100%;
    color: var(--color-input-foreground);
	background-color: var(--color-body-background);
	border: 0.1rem solid var(--color-highlight-borders);
}

.editable-div {
    overflow-y: auto;
    margin-bottom: 1rem;
}
.placeholder-detected {
    background-color: #c6d7e5;
    color: #0e3850;
    border-radius: 4px;
    padding: 0 2px;
    font-weight: bold;
    font-size: 90%;
    border: 1px solid #badbcc;
    display: inline-block;
    height: 2.6rem;
}

/* This block is necessary to maintain input field colours when the browser applies auto-fill. It's a bit of a hack to override the browser's own styling, but it seems to work */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-input-foreground);
  -webkit-box-shadow: 0 0 0 40rem var(--color-body-background) inset;
}

input[type='color']:read-only, input[type='date']:read-only, input[type='datetime']:read-only, input[type='time']:read-only, input[type='datetime-local']:read-only, input[type='email']:read-only, input[type='month']:read-only, input[type='number']:read-only, input[type='password']:read-only, input[type='search']:read-only, input[type='tel']:read-only, input[type='text']:read-only, input[type='url']:read-only, input[type='week']:read-only, input:not([type]):read-only, textarea:read-only, select:disabled, input[type='file']:disabled, .select-readonly {
	background-color: var(--color-input-disabled);
}

.text-mimic-link-disabled {
    color: var(--color-input-disabled);
    font-size: 14px;
}

input[type='color']:focus, input[type='date']:focus, input[type='datetime']:focus, input[type='datetime-local']:focus, input[type='time']:focus, input[type='email']:focus, input[type='month']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='week']:focus, input:not([type]):focus, textarea:focus, .editable-div:focus, select:focus {
    border-color: var(--color-senatical-secondary);
    outline: 0;
}

select {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat, var(--color-body-background);
    padding-right: 3rem;
}

select:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23727272" d="M0,0l6,8l6-8"/></svg>');
}

input[type='file']::file-selector-button {
    border: 0.1rem solid var(--color-highlight-borders);
    border-radius: 1.8rem;
    box-shadow: none;
    box-sizing: inherit;
    height: 3.8rem;
    padding: 0.6rem 1.5rem 0.7rem;
    background-color: var(--color-senatical-primary);
    color: white;
    margin-right: 10px;
}

/* 2025-10-21 Ineke: sets textarea height to take up the same space as two input controls plus labels (which will look nice if controls are split over two columns) */
textarea, .editable-div {
    min-height: 13.5rem;
}

input[type='file']::file-selector-button:hover {
    cursor: pointer;
    transform: scale(1.015,1.015);
    box-shadow: -1px -2px 2px rgb(0 0 0 / 0.2);

}

/* DATE INPUT STYLING - for full clickability on entire field to open date selector popup */
/* Note that webkit styling does NOT work in Firefox */
input[type="date"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0; /* Makes the original icon transparent */
    cursor: pointer; /* Ensures the cursor changes to a pointer everywhere */
    background: transparent; /* Removes the original icon's background */
}

/* END DATE INPUT STYLING */

.date-nav {
    display: flex;
    align-items: center;
    line-height: 16px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: var(--color-senatical-primary-fg);
}

.date-nav a {
    line-height: unset;
}

svg.next-prev-boxed {
    fill: var(--color-senatical-primary);
    height: 30px;
    width: 30px;
    background: radial-gradient(circle, var(--color-senatical-primary-fg) 40%, rgba(255, 0, 0, 0) 50%);
}

div.required > label::after, label.required::after {
	content: '*';
	color: var(--color-senatical-primary);
	font-weight: bolder;
	font-size: 130%;
	display: inline-block;
	margin-left: 0.5rem;
	position: absolute;
	margin-top: -2px;
}

.checkbox label {
    font-weight: normal;
    margin: 0;
}

.checkbox label input[type="checkbox"] {
    margin: 0 0.75rem 0 0;
}

.scrolling-checkboxes {
    width: 100%;
}
.scrolling-checkboxes > div.input.select {
    max-height: var(--max-rows-height);
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 0 1rem;
    border: 1px solid var(--color-highlight-borders);
    border-radius: 0.4rem;
}

.scrolling-checkboxes > div.input.checkbox, .scrolling-checkboxes label.has-select-all {
    display: inline;
}

.scrolling-checkboxes #select-all {
    margin-left: calc(1rem + 1px);
    margin-right: 0.75rem;
}

td, th {
    border-bottom: 0.1rem solid var(--color-frame-borders);
}

th {
    font-size: clamp(12px, 1.5vw, 14px);
}

.select-on-hover {
    display: none;
    position: absolute;
    cursor: pointer;
}
tr .select-on-hover {
    bottom: 40px;
}
li.field-layout .select-on-hover {
    right: 5px;
    top: 5px;
}

tr:hover .select-on-hover, li.field-layout:hover .select-on-hover {
    display: block;
}

.select-on-hover-label {
    position: relative;
    font-size: 70%;
    font-weight: bold;
    border-radius: 10px;
    padding: 0.5rem;
    background: var(--color-senatical-primary);
    color: var(--color-senatical-primary-fg);
    text-align: center;
    anchor-name: --select-on-hover-anchor;
}

.select-on-hover-content {
    display: none;
    position: absolute;
    bottom: 10px;
    width: 90vw;
    background: var(--color-body-background);
    padding: 5px 2px 5px 0;
    border-radius: 10px;
    height: min-content;
    box-shadow: 3px 3px 6px var(--color-boxshadow);
    opacity: 0.95;
    cursor: pointer;
    /* Commented for reference, not yet supported by all browsers,
    but will be useful for future versions of CSS.
    position-anchor: --select-on-hover-anchor;
    position-area: bottom;
    position-try-fallbacks: flip-block;*/
    z-index: 10000;
}

tr .select-on-hover-content {
    left: 15px;
}

li.field-layout .select-on-hover-content {
    right: 15px;
}

.select-on-hover-content-inner {
    overflow: auto;
    max-height: calc(50vh - 10px);
    padding: 0 3px;
}

.select-on-hover-content ul {
    list-style: none;
    font-size: 85%;
    margin: 3px;
}

.select-on-hover-group {
    font-weight: bold;
    padding-left: 5px;
}

.select-on-hover:hover .select-on-hover-content:not(.nohover) {
    /* We are no longer doing the hover functionality with CSS, but with jQuery to satisfy mobile devices. */
    /* display: block; */
}

.select-on-hover-content li {
    border-radius: 15px;
    padding: 0.25rem 1rem;
}

.select-on-hover-content li:hover {
    background: var(--color-body-foreground);
    color: var(--color-body-background);
}

.report-comment-column {
    width: 100%;
}

.error-message {
    color: var(--color-message-error-text);
}

#morediv.centre {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 75%;
}

#morediv a#more {
    background: var(--color-senatical-primary);
    color: var(--color-senatical-primary-fg);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    text-decoration: none;
    margin-top: 1rem;
    cursor: pointer;
}

#morediv a:hover {
    box-shadow: 3px 3px 6px var(--color-boxshadow);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

svg.spinner {
    animation: spin 1s linear infinite;
}
svg.spinner circle {
    stroke: var(--color-senatical-primary);
}
svg.spinner path {
    fill: var(--color-senatical-primary);
}
/* END GENERAL */

/* REPORT COMMENT REPORT CONTEXT */
.report-comment-report-context {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.report-comment-report-context .rcrc-row:nth-child(even) {
    background-color: var(--color-alt-rows);
}

.rcrc-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border: 1px solid var(--color-highlight-borders);
    border-radius: 0.4rem;
    padding: 0.5rem;
    margin: 3rem 0 0 0;
    padding: 10px;
    position: relative;
}
.rcrc-row.rcrc-previous {
    margin: 0.5rem 0 0 0;
}
.rcrc {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
}
.rcrc-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.rcrc-inner-cell {

}
.rcrc-comment-cell {
    font-size: 90%;
    padding: 10px 0;
    width: 100%;
}
.rcrc-comment-cell p {
    margin-bottom: 0.5rem;
}
.rcrc-subject-cell {
    width: 150px;
    font-weight: bold;
}
.rcrc-previous-yg {
    width: 150px;
    font-weight: bold;
}
.rcrc-marks-cell {
    font-size: 90%;
    position: relative;
    overflow: visible;
    padding-left: 2px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    min-width: 5vw;
}
.rcrc-marks-cell.rcrc-categories {
    text-align: left;
    justify-content: left;
    font-size: 80%;
    font-weight: bold;
}
.rcrc-cell-header {
    display: none;
    position: absolute;
    background-color: var(--color-senatical-primary);
    color: var(--color-senatical-primary-fg);
    top: -20px;
    left: 0;
    min-width: 100%;
    font-size: clamp(7px, 2.5vw, 12px);
    padding: 0 clamp(2px, 1.5vw, 5px);
    height: clamp(10px, 4vw, 20px);
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 2px 2px 6px var(--color-boxshadow);
}
.rcrc-row:hover .rcrc-cell-header {
    display: flex;
}
.rcrc-row:not(.rcrc-selected):hover {
    background-color: var(--color-row-hover);
}
.rcrc-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 85%;
    font-weight: bold;
    height: 20px;
}

.rcrc-footer .rcrc-actions {
    margin-top: 20px;
}

.rcrc-footer .rcrc {
    width: 100%;
}

#morediv .rcrc-actions a:hover {
    box-shadow: none;
    cursor: pointer;
}
.rcrc-selected {
    background-color: var(--color-senatical-secondary);
    color: var(--color-senatical-secondary-fg);
}
#morediv .rcrc-selected .rcrc-actions a {
    color: var(--color-senatical-secondary-fg);
}
svg.rcrc-link-icon {
    width: 20px;
    height: 20px;
    fill: var(--color-body-foreground);
    position: absolute;
    right: -13px;
    top: -13px;
    transform: rotate(180deg);
    opacity: 0.5;
}
@media only screen and (max-width:650px) {
    .rcrc-row.rcrc-previous {
        margin-left: 0;
    }
    .rcrc-subject-cell, .rcrc-previous-yg {
        width: 100%;
    }
    .rcrc-marks-cell, .rcrc-marks-cell.rcrc-categories {
        font-size: clamp(5px, 3vw, 12px);
    }
    .rcrc-actions {
        font-size: clamp(8px, 3vw, 12px);
    }
    .rcrc-row.rcrc-footer .rcrc-marks-cell.rcrc-categories {
        display: none;
    }
    .rcrc-cell-header {
        top: clamp(-20px, -6vw, -30px);
    }
    .rcrc-row:hover .rcrc-cell-header {
        display: none;
    }
    .rcrc-marks-cell:hover .rcrc-cell-header {
        display: flex;
    }
}
/* END REPORT COMMENT REPORT CONTEXT */

/* IN-TABLE RADIO BUTTONS */

label input[type="radio"].horizontal {
	display: block;
	margin: auto auto;
	margin-bottom: 4px;
}

input[type="radio"].horizontal {
	margin-top: 1rem;
}

.horiz-radio-table-header, .horiz-radio-table-labels {
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	text-align: center;
	min-width: 300px;
}

.horiz-radio-table-header {
	display: grid;
	border-top: 1px dotted white;
	border-radius: 20px;
	padding: 2px 7px;
	min-height: 22px;
}

.horiz-radio-table-labels {
	display: none;
}

.input-grid-2c-1c {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.input-grid-2c-1c div {
    display: flex;

}

.input-grid-2c-1c div.input {
    flex-direction: column;
}

#setall-delall-container {
    display: flex;
    justify-content: flex-end;
    grid-column: span 2;
    gap: 20px;
    align-items: end;
}

@media (max-width: 650px) {
    .input-grid-2c-1c {
        grid-template-columns: 1fr 1fr;
    }
    #setall-delall-container {
        justify-content: space-between;
    }
}

.collapsed-table-set-all {
    margin-bottom: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.collapsed-table-set-all .set-all-button {
    border-radius: 10px;
    transition: 0.1s;
    user-select: none;
    background: var(--color-clickable-labels-background);
    padding: 3px 10px;
    margin: 0.25em;
    display: inline-block;
    font-weight: normal;
    cursor: pointer;
}

.collapsed-table-set-all .set-all-button:hover {
    background: var(--color-clickable-labels-hover);
}

.collapsed-table-set-all .set-all-button.allselected {
    background: var(--color-senatical-primary);
    color: var(--color-senatical-primary-fg);
}

.collapsed-table-set-all .label {
    font-weight: bold;
}

td input[type="radio"].horizontal, .horiz-radio-table-heading {
	display: inline-block;
}

span.horiz-radio-table-heading {
    overflow: hidden;
    text-wrap: nowrap;
    /* border-left: 1px inset var(--color-senatical-primary-fg); */
    border-radius: 9px;
    padding-left: 2px;
    cursor: pointer;
}

span.horiz-radio-table-heading:after {
  position: relative;
  display: block;
  top: -22px;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to left,
     var(--color-senatical-primary) 0%,
     rgba(255,255,255, 0) 35%
  );
}

td.in-cell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    height: 8rem;
    text-align: center;
    padding-left: calc(1.5rem + 7px);
    padding-right: calc(1.5rem + 7px);
}

th.in-cell-grid {
	text-align: center;
	white-space: normal;
}

td.in-cell-grid label {
    display: block;
    margin-top: 1rem;
    cursor: pointer;
}

td.in-cell-grid label span {
    opacity: 0;
    transition: all 150ms ease;
    margin: auto auto;
    margin-top: 5px;
    padding: 0 7px;
    display: block;
    text-wrap: nowrap;
    width: min-content;
}

td.in-cell-grid label:hover span {
    opacity: 65%;
    background: var(--color-body-foreground);
    text-align: center;
    width: min-content;
    color: var(--color-body-background);
    border-radius: 10px;
    position: relative;
    z-index: 1000;
}

/* The break-column class is a work-around for in-cell-grid problems */
.break-column {
	max-width: 1px;
	padding: 0;
	margin: 0;
}

/* For newer browsers, the td and th do not need to specifically be given the in-cell-grid class,
and will be detected using :has pseudo-selector. In the future, this would be the default when
better supported. For now, we apply the class in-cell-grid to any th or td that contains horizontal
radio buttons.
@supports selector(:has(*)) {
    td:has(input.horizontal) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	height: 8rem;
	text-align: center;
    }

    th:has(.horiz-radio-table-header) {
	text-align: center;
	white-space: normal;
    }

    tr:has(.horiz-radio-table-header) {
	vertical-align: center;
    }

    td:has(input.horizontal) label {
        display: block;
        margin-top: 1rem;
    }

    td:has(input.horizontal) label span {
        opacity: 0;
        transition: all 150ms ease;
    }

    td:has(input.horizontal) label:hover span {
        opacity: 65%;
    }
} */

td input[type="radio"].horizontal {
    margin-bottom: 4px;
    position: absolute;
    opacity: 0;
}

td input[type="radio"].horizontal +label:before {
        content: '';
        margin: auto auto;
        background: var(--color-body-background);
        border-radius: 50%;
        border: 1px solid #a7a7a7;
        display: block;
        width: 1.4em;
        height: 1.4em;
        position: relative;

        /*margin-right: 1em;*/
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        transition: all 150ms ease;
}

td input[type="radio"].horizontal:checked +label:before {
          background-color: var(--color-senatical-primary);
          box-shadow: inset 0 0 0 3px var(--color-senatical-primary-fg);
}

td input[type="radio"].horizontal:focus +label:before {
          outline: none;
          border-color: darkgrey;
}

td input[type="radio"].horizontal:disabled +label:before {
          box-shadow: inset 0 0 0 4px grey;
          border-color: darkgrey;
          background: grey;
}

td input[type="radio"].horizontal +label:empty:before {
          margin-right: 0;
}


@media (max-width: 930px) {
    td.in-cell-grid label:hover span {
        opacity: unset;
        background: unset;
        color: unset;
    }

    td.in-cell-grid label span {
    	opacity: unset;
    }

    table.collapse td.in-cell-grid {
        display: flex;
        justify-content: space-evenly;
        /* Commented out by NC, causing problems on mobile view */
        /* border: 0.1rem solid var(--color-highlight-borders); */
        border-radius: 0.4rem;
        margin: 4rem 20px 1.5rem 20px;
        padding-bottom: 5px;
    }

    table.collapse td.in-cell-grid::before {
    	margin-top: -30px;
    	margin-left: -10px;
    }

    td.in-cell-grid {
    	height: unset;
    }

    table.collapse td {
    	border-bottom: none;
    }
}

/* END IN-TABLE RADIO BUTTONS */

/* FORM VIEW RADIO BUTTONS */
li.field-layout label + .radio-button-container, li.field-layout label + div.input.radio {
  display: block;
}

.radio-button-container, .input.radio {
  position: relative;
  width: 100%;
  border: 1px solid var(--color-highlight-borders);
  border-radius: 0.4rem;
  text-align: center;
}


/* We no longer need this fallback text, since we can offer clickable labels in older browsers
   without using the :has selector
.radio-button-container::after {
	content: 'Your browser does not support some new features. Please upgrade if possible.';
	display: block;
	font-size: 80%;
	font-style: italic;
	text-align: center;
}
.radio-button-container::after {
		display: none;
} */

.radio-button-container label, .input.radio label {
	text-align: center;
	font-weight: normal;
	display: inline-block;
	padding: 0.5em 1em;
	margin: 0.5em;
	cursor: pointer;
	border-radius: 10px;
	transition: 0.1s;
	user-select: none;
	background: var(--color-clickable-labels-background);
}


input.radio-buttons {
	display: block;
	margin: auto auto;
}

div.input.radio.required label::after {
	display: none;
}

.radio-button-container, .input.radio {
		text-align: left;
}

.radio-button-container label:hover, .input.radio label:hover {
	    background: var(--color-clickable-labels-hover);
}

.radio-button-container label:active, .input.radio label:active {
	    transform: translateY(1px);
}

/* Grid Dashboard Charts */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    /* Force rows to be exactly 200px; they won't grow even if content is big */
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 3rem;
    margin-top: 30px;
    border: 1px solid var(--color-highlight-borders);
    border-radius: 15px;
    padding: 30px 20px 20px 20px;
    background: var(--color-body-background);
}

.chart-card {
    display: flex;
    flex-direction: column;
    min-height: 0;   /* CRITICAL: Allows the card to be smaller than its content */
    overflow: visible;
    position: relative;
    height: 100%;
    padding: 1rem 0;
}

.chart-inner-wrapper {
    flex: 1;         /* Fills all available vertical space in the card */
    position: relative;
    width: 100%;
    /*overflow: hidden; /* Keeps the chart bounded */
    min-height: 0;
    height: 100%;
}

/* Ensure the canvas actually obeys the wrapper */
.chart-inner-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.chart-card h3, .dl-header {
    position: absolute;
    top: -2.2rem;
    color: var(--color-chart-ticks);
    font-size: 14px;
    font-weight: normal;
    z-index: 9999; /* Ensure it stays above the chart */
    margin: 0;
    padding: 0;
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy pop-in effect */
    width: 100%;
    text-align: center;
    letter-spacing: -.1rem;
    font-family: "Raleway", sans-serif;
    line-height: clamp(24px, 4vw, 36px);
}

/* Brighten title on hover */
.chart-card:hover h3, .chart-card:hover .dl-header {
    opacity: 0.8;
}

.chart-container {
    flex-grow: 1;
    width: 100%;
    height: 100%; /* Now takes up the entire card area */
    position: relative;
}
.dashboard-list-root {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible; /* Let the title be seen if it's inside, though we moved it out */
}
.dl-scaler {
    width: 100%;
    height: auto;
}
.dl-wrapper { overflow: hidden; border-radius: 4px;}

.dl-footer { padding: 5px; text-align: center; font-size: 0.9em; opacity: 0.8; }
.dl-body {
    overflow: auto;
    border-radius: 20px;
    display: grid !important;
    grid-template-columns: repeat(24, 1fr);
    border: 1px solid var(--color-highlight-borders);
    width: 100%;
    height: 100%;
}
.dl-cell {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    height: 100%;
    min-height: 0;
    font-size: 80%;
}

/* This mimics the Chart.js "External Tooltip" style */
#dashboard-universal-tooltip {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

    /* Chart.js signature transition: short, snappy, and damped */
    transition:
        opacity 0.15s ease,
        left 0.15s cubic-bezier(0.165, 0.84, 0.44, 1),
        top 0.15s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Start state */
    transform: translate(-50%, -100%) scale(0.8);
    transform-origin: center center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* Caret Logic */
/* If the tooltip shifts, the arrow should stay anchored to the cell's center */
/* This works because centerX is calculated based on the cell */
#dashboard-universal-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
}


/* Bottom Caret (Standard) */
#dashboard-universal-tooltip:not(.flipped)::after {
    top: 100%;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

/* Top Caret (Flipped) */
#dashboard-universal-tooltip.flipped::after {
    bottom: 100%;
    border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
}



@media (max-width: 930px) {
    .dashboard-grid {
        /* Force to 1 column so 'span' logic is ignored or behaves like full-width */
        grid-template-columns: 1fr;
        /* Allow row height to be consistent or automatic */
        grid-auto-rows: 300px;
    }

    .chart-card {
        /* Force every card to occupy the single available column */
        grid-column: span 1 !important;
        /* Force every card to be 1 row unit (300px) high */
        grid-row: span 1 !important;
    }

    .chart-card h3 {
        /* Make titles slightly larger and more visible on touch screens */
        opacity: 0.9;

    }
}

/* End Grid Dashboard Charts */

@media (max-width: 930px) {
	    .radio-button-container label, .input.radio label {
	    	padding: 0.5em 0.75em;
	    	margin: 0.25em;
	    }

        .collapsed-table-set-all {
           display: flex;
        }

	/* Experimentally have in-cell-grid options change to clickable labels on table collapse */
	    table.collapse td.in-cell-grid {
            text-align: left;
            display: block;
	    }

	    table.collapse td.in-cell-grid::before {
	    	display: block;
	    }

	    table.collapse td.in-cell-grid label {
	        border-radius: 10px;
	        transition: 0.1s;
	        user-select: none;
	        background: var(--color-clickable-labels-background);
		padding: 0.5em 0.75em;
	    	margin: 0.25em;
	    	display: inline-block;
	        font-weight: normal;
	    }

	    table.collapse td.in-cell-grid label:hover {
	        background: var(--color-clickable-labels-hover);
	    }

	    table.collapse td.in-cell-grid label:active {
	        transform: translateY(1px);
	    }

	    table.collapse td.in-cell-grid input.horizontal:checked + label {
	        background: var(--color-senatical-primary);
	        color: var(--color-senatical-primary-fg);
	    }

	    td input[type="radio"].horizontal +label:before {
	        display: none;
	    }
}

/* We got around using the :has selector by changing the Cake form template so that the radio input is rendered before
   the label, rather than inside it, and then using the CSS + combinator to select and style the label directly after
   a "checked" radio button. This is more widely supported, so saves us needing a fallback for older browsers.
.radio-button-container label:has(input.radio-buttons:checked) */
.radio-button-container input.radio-buttons:checked + label, .input.radio input.radio-buttons:checked + label {
	  background: var(--color-senatical-primary);
	  color: var(--color-senatical-primary-fg);
}

input.radio-buttons {
	  display: none;
}

/* END FORM VIEW RADIO BUTTONS */


/* HEADER BAR */
div.header-bar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 10000;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0;
    background-color: var(--color-logo-background);
    border-bottom: 4px solid var(--color-senatical-secondary);
    box-shadow: 1px 0 10px black;
}

div.top-nav-title {
    flex-grow: 0;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
}

div.top-nav-title img.school-shield, div.top-nav-title img.school-name {
    height: clamp(40px, 12vw, 60px);
    padding: 5px;
    object-fit: scale-down;
}

div.top-nav-title img.school-name {
    max-width: 220px;
}

div.top-nav-title img.school-shield {
    max-width: 80px;
}

div.separator-bar {
    background-color: gainsboro;
    width: 100%;
    min-height: 30px;
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: right;
    z-index: 9999;
    padding-top: 5px;
}
/* END HEADER BAR */


/* MENU */
nav.header-bar {
    background-color: var(--color-senatical-headerbar);
    flex-grow: 1;
    align-items: flex-end;
    display: flex;
}

nav.header-bar ul {
    background-color:var(--color-senatical-headerbar);
    display:flex;
    flex-direction:column;
    z-index: 1000;
    margin: 0;
    flex-wrap: wrap;
    flex-grow: 10;
}

nav.header-bar ul.menulevel1 {
    align-items: flex-end;
    height: 100%;
    justify-content: stretch;
}

nav.header-bar ul li {
    list-style-type: none;
    cursor: pointer;
}

nav.header-bar ul li a {
    padding: .8rem 1rem;
    display:block;
    text-decoration: none;
    color: var(--color-senatical-headerbar-fg);
}

nav.header-bar ul li span.nolink {
    padding:.8rem 1rem;
    display:block;
    text-decoration: none;
    color:var(--color-senatical-headerbar-fg);
}

nav.header-bar ul li:hover {
    transition: all 0.1s;
}

.arrow-right {
    float:right;
}

.arrow-down::after {
    content:" \25BC";
}

.arrow-right::after {
    content:" \25BA";
}

svg.hamburger {
    width: 22px;
    height: 22px;
    fill: var(--color-senatical-headerbar-fg);
    display: none;
    margin: auto auto;
    padding: 2px;
}

.nocursor {
    cursor: not-allowed;
}

nav.header-bar ul li.senatical {
    flex-grow: 0;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
    justify-self: flex-end;
}

nav.header-bar ul li.senatical:hover {
    background: none;
}

nav.header-bar ul li.senatical a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    transition: all 1s;
}

nav.header-bar ul li.senatical a span.senatical {
    color: rgb(255,255,255,0.85);
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
}

nav.header-bar ul li.senatical a span.x {
    color: var(--color-senatical-blue);
    font-size: 22px;
    font-weight: bolder;
    text-shadow: 0 0 4px white;
    text-align: right;
    transition: all 1s;
    margin: 0 20px 0 2px;
}

nav.header-bar ul li.senatical a:hover {
    animation: tada 1s;
    transform: scale3d(1.1, 1.1, 1.1);
}
/* END MENU */


/* BREADCRUMBS */
nav.breadcrumbs {
    background-color: gainsboro;
    flex-grow: 1;
    transition: all 0.5s;
}

nav.breadcrumbs ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    justify-content: flex-end;
    column-gap: 5px;
    font-size: 85%;
    align-items: center;
    color: #5f6268;
    padding: 0 5px;
}

nav.breadcrumbs ul li::before {
    color: var(--color-senatical-primary);
    content:" \27A1";
    margin-right: 5px;
}

nav.breadcrumbs ul li:first-child:before {
    content:"";
}

nav.breadcrumbs a {
    color: var(--color-senatical-primary);
}

div.backbutton a svg.backbutton {
    height: 22px;
    width: 22px;
    fill: var(--color-senatical-secondary);
}

div.backbutton {
    flex-grow: 0;
    margin: 0 10px;
}

div#threedots {
    flex-grow: 0;
    margin: 0 10px;
    display: none;
}

svg.threedots {
    fill: var(--color-senatical-secondary);
    height: 22px;
    width: 22px;
    cursor: pointer;
}
/* END BREADCRUMBS */


/* DATA TABLES */
table {
    margin-bottom: 0;
}

div.table-responsive {
    /* Uncomment for vertical scroll in tables
    max-height: calc(100vh - 150px);
    */
    border-radius: 15px 15px 0 0;
    border: 1px solid var(--color-frame-borders);
    border-bottom: none;
    overflow-x: auto;
}

thead {
    position: sticky;
    top: 0;
    box-shadow: 0 5px 10px -5px var(--color-index-shadows);
    background-color: var(--color-senatical-primary);
    color: var(--color-senatical-primary-fg);
    z-index: 9000;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

thead th:first-child {
    border-top-left-radius: 15px;
}

thead th:last-child {
    border-top-right-radius: 15px;
}

tr:nth-child(even) {
    background-color: var(--color-alt-rows);
}

tbody tr:hover {
    background-color: var(--color-row-hover);
}

td:first-child, th:first-child {
    padding: 1.2rem 1.5rem;
}

td:last-child, th:last-child {
    padding-right: 1.5rem;
}

thead th a, thead th a:hover, thead th a:active, thead th a:focus {
    color: var(--color-senatical-primary-fg);
    font-size: clamp(12px, 1.5vw, 14px);
}

td.actions {
    white-space: nowrap;
    position: sticky;
    right: 0;
    background-color: var(--color-actions-column);
    box-shadow: -3px 0 20px var(--color-index-shadows);
    text-align: center;
    color: var(--color-senatical-secondary);
    width: 122px;
    min-width: 122px;
    max-width: 220px;
    z-index: 8999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

th.actions {
    white-space: nowrap;
    position: sticky;
    right: 0;
    background-color: var(--color-senatical-secondary);
    text-align: center;
    color: var(--color-senatical-secondary-fg);
    width: 122px;
    min-width: 122px;
    max-width: 220px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

td.longtext {
    min-width: 400px;
}

svg.table-action {
    width: 28px;
    height: 28px;
    fill: var(--color-senatical-secondary);
}

svg.table-action-stroke {
    width: 28px;
    height: 28px;
    stroke: var(--color-senatical-secondary);
}

svg.table-action text {
    fill: var(--color-body-background);
}

td.actions svg.table-action {
    width: 22px;
    height: 22px;
}

svg.larger {
    width: 32px;
    height: 32px;
}

td.actions svg.larger {
    width: 28px;
    height: 28px;
}
/* Embedded clear-filter icon */
tr[collapsed-heading="Filters"] td div.input {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
tr[collapsed-heading="Filters"] td div.input.select select, tr[collapsed-heading="Filters"] td div.input input {
    margin-bottom: 0;
}
svg.clear-filter-icon {
    padding: 0;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 0 5px;
    cursor: pointer;
    fill: grey;
    display: none;
}
svg.clear-filter-icon.visible {
    display: block;
}

/* To apply fades at table edges when horizontal scroll is needed */
div.table-responsive {
    /* Multi-stop mask: Left fade | Solid center | Right fade (only if no frozen col) */
    /* Use -webkit prefix for Safari/Chrome compatibility */
    -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0, var(--mask-left, 1)) 0%,
    black 8%,
    black 92%,
    rgba(0,0,0, var(--mask-right, 1)) 100%
    );
    mask-image: linear-gradient(to right,
    rgba(0,0,0, var(--mask-left, 1)) 0%,
    black 8%,
    black 92%,
    rgba(0,0,0, var(--mask-right, 1)) 100%
    );
}
/* If frozen column exists, disable the right-hand fade entirely */
div.table-responsive.has-frozen-col {
    --mask-right: 1 !important; /* Force right side to be fully opaque */
}
/* End fades for horizontal scroll */

/* END DATA TABLES*/

/* ACTION MENU */
/* Used by both related menu and context menu */
div.actionmenu {
    display: inline-block;
    background-color: white;
    color: var(--color-senatical-secondary);
    font-size: 80%;
}

div.actionmenu ul {
    margin: 0;
}

div.actionmenu ul li {
    list-style-type: none;
}

div.actionmenu ul li ul li a {
    padding: 5px;
    display:block;
    text-decoration: none;
    color: #444;
    transition: all 0s;
}

div.actionmenu ul li span.nolink {
    padding: 0;
    text-decoration: none;
    color: var(--color-senatical-secondary);
}

div.actionmenu ul li.level1:hover {
    text-shadow: -1px -2px 2px rgb(0,0,0,0.2);
    cursor: pointer;
}

div.actionmenu ul li.level2:hover {
    background-color: var(--color-senatical-secondary);
}

div.actionmenu ul li.level2:hover a {
    color: white;
}

div.actionmenu ul li span.arrow-down::after {
    content:" \25BC";
    display: block;
    margin-top: -8px;
    font-size: 80%;
}

div.actionmenu ul.level1 li ul.level2 {
    display:flex;
    flex-direction:column;
    position:absolute;
    visibility: hidden;
    opacity: 0;
    transition: all 0.8s;
}

div.actionmenu ul.level1 li:hover ul.level2 {
    display:flex;
    flex-direction:column;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
}

div.actionmenu ul.level2 {
    border: 1px groove rgb(204,204,204,0.5);
    box-shadow: 0 0 5px #444;
    background-color: rgb(255,255,255,0.9);
}

div.actionmenu ul li.level1 {
    text-align: center;
}

div.actionmenu li.level2 {
    text-align: left;
}
/* END ACTION MENU */


/* PAGE ACTIONS*/
div.page-actions {
    float: right;
    display: flex;
    column-gap: 10px;
    flex-flow: row nowrap;
}
div.page-actions a, div.page-actions div {
    margin: 5px;
}
/* END PAGE ACTIONS */


/* VERTICAL TOGGLE SWITCH */
.vtoggleswitch-container {
  margin: auto;
  color: hsl(0, 0%, 30%);
  font-weight: bold;
  font-size: 12px;
  display: flex;
  float: left;
}

.vtoggle {
  width: var(--vtoggle-switch-width);
  height: var(--vtoggle-switch-height);
  background-color: hsl(0, 0%, 80%);
  border-radius: 10px;
  padding: 2px 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: background-color 300ms 300ms;
}

.vtoggle-circle {
  width: var(--vtoggle-circle-width);
  height: var(--vtoggle-circle-width);
  background-color: hsl(0, 0%, 95%);
  border-radius: 50%;
  margin-top: calc(var(--vtoggle-switch-height) - 4px - var(--vtoggle-circle-width));
  transition: margin 500ms ease-in-out;
}

.vtoggle-text {
  display: flex;
  flex-direction: column;
  line-height: .8;
  justify-content: space-between;
  padding: 6px;
  color: hsl(0, 0%, 50%);
}

#vtoggleswitch:checked + .vtoggle > .vtoggle-circle {
  margin-top: 0;
}

#vtoggleswitch:checked + .vtoggle {
  background-color: var(--color-senatical-primary);
}
/* USAGE EXAMPLE:
    <div class="vtoggleswitch-container">
        <input hidden="" style="display:none;" id="vtoggleswitch" name="vtoggleswitch" type="checkbox" <?php if ($current) {echo 'checked';}?>>
        <label class="vtoggle" for="vtoggleswitch">
            <div class="vtoggle-circle"></div>
        </label>
        <div class="vtoggle-text">
            <span>Current</span>
            <span>Historical</span>
        </div>
    </div>
*/
/* END VERTICAL TOGGLE SWITCH */

/* HORIZONTAL TOGGLE SWITCH */
.htoggleswitch-container {
  margin: auto;
  color: hsl(0, 0%, 30%);
  font-weight: bold;
  font-size: 12px;
  display: flex;
  float: left;
}

.htoggle {
  width: var(--htoggle-switch-width);
  height: var(--htoggle-switch-height);
  background-color: hsl(0, 0%, 80%);
  border-radius: 10px;
  padding: 2px;
  cursor: pointer;
  display: flex;
  justify-content: left;
  transition: background-color 300ms 300ms;
}

.htoggle-circle {
  width: var(--htoggle-circle-width);
  height: var(--htoggle-circle-width);
  background-color: hsl(0, 0%, 95%);
  border-radius: 50%;
  margin-left: 0;
  transition: margin 500ms ease-in-out;
}

.htoggle-text {
  display: flex;
  flex-direction: column;
  line-height: .8;
  justify-content: space-between;
  padding: 6px;
  color: hsl(0, 0%, 50%);
}

#htoggleswitch:checked + .htoggle > .htoggle-circle {
  margin-left: calc(var(--htoggle-switch-width) - 4px - var(--htoggle-circle-width));
}

#htoggleswitch:checked + .htoggle {
  background-color: var(--color-senatical-primary);
}
/* EXAMPLE USAGE:

    <div class="htoggleswitch-container">
	<div class="htoggle-text">
		Historical
	</div>
        <input hidden="" style="display:none;" onclick="return toggleURL();" id="htoggleswitch" name="htoggleswitch" type="checkbox" <?php if ($current) {echo 'checked';}?>>
        <label class="htoggle" for="htoggleswitch">
            <div class="htoggle-circle"></div>
        </label>
        <div class="htoggle-text">
		Current
        </div>
    </div>


    <script>
	function toggleURL(){
	    if(document.getElementById('htoggleswitch').checked){
	        window.location='<?= $this->Url->build(['action' => 'learners', '?' => ['grouping-id' => $groupingId, 'current' => '1']]) ?>';
	    }
	    else {
	        window.location='<?= $this->Url->build(['action' => 'learners', '?' => ['grouping-id' => $groupingId, 'current' => '0']]) ?>';
	    }
	    return true;
	}
    </script>
*/
/* END HORIZONTAL TOGGLE SWITCH */

/* MULTI-SWITCH */
.multiswitch-container {
  width: 300px;
  padding: 2px;
  margin-bottom: 1rem;
}
.multiswitch
{
  position: relative;
  height: 24px;
  display:flex;
  justify-content:space-around;
  border: 1px groove lightgrey;
  border-radius: 15px;
}
.multiswitch label{
  padding: 2px;
  z-index:1;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  width: 33.3%;
  color: grey;
  -moz-transition: all .4s ease-in;
  -o-transition: all .4s ease-in;
  -webkit-transition: all .4s ease-in;
  transition: all .4s ease-in;
}
input[type="radio"].multiswitch-radio {
  display:none;
  cursor: pointer;
}
#multiswitch-radio1:checked ~ #multiswitch-label1, #multiswitch-radio2:checked ~ #multiswitch-label2, #multiswitch-radio3:checked ~ #multiswitch-label3 {
  color: white;
}
#multiswitch-active-label{
  position: absolute;
  left:0;
  width: 33%;
  height: 100%;
  color: white;
  background: var(--color-senatical-primary);
  border: 1px solid var(--color-body-background);
  border-radius: 15px;
  opacity: .8;
  transition: .5s left ease;
}
#multiswitch-radio1:checked ~ #multiswitch-active-label{
  left:0;
}
#multiswitch-radio2:checked ~ #multiswitch-active-label{
  left:33%;
}
#multiswitch-radio3:checked ~ #multiswitch-active-label {
  left:67%;
}


/* END MULTI-SWITCH */

/* PAGINATION */
ul.pagination, div.pagination {
    background-color: var(--color-senatical-primary);
    width: clamp(250px, 100%, 100%);
    justify-content: space-between;
    border-radius: 0 0 15px 15px;
    padding: 0 10px;
    border: 1px solid var(--color-frame-borders);
    border-top: none;
}

ul.pagination li {
    margin: 0;
    flex-grow: 0;
}

ul.pagination li ul {
    margin: 0;
}

ul.pagination li.first, ul.pagination li.prev, ul.pagination li.last, ul.pagination li.next {
    margin: 0 5px;
}

ul.pagination li.prev {
    margin-right: auto;
}

ul.pagination li.next {
    margin-left: auto;
}

div.paginator ul.pagination li a {
    color: var(--color-senatical-primary-fg);
    text-transform: uppercase;
    padding: 10px 3px;
    line-height: 14px;
    font-size: clamp(10px, 1.5vw, 14px);
    font-weight: normal;
    min-width: unset;
}

div.paginator ul.pagination li a:hover {
    text-decoration: none;
}

ul.pagination li.first a, ul.pagination li.prev a, ul.pagination li.next a, ul.pagination li.last a {
    padding: 10px 5px;
}

ul.pagination li.first a::before {
    content: '\219E';
    color: var(--color-senatical-primary-fg);
    font-size: clamp(10px, 1.5vw, 14px);
    margin-right: 3px;
}

ul.pagination li.last a::after {
    content: '\21A0';
    color: var(--color-senatical-primary-fg);
    font-size: clamp(10px, 1.5vw, 14px);
    margin-left: 3px;
}


ul.pagination li.prev a::before {
    content: '\21E0';
    color: var(--color-senatical-primary-fg);
    font-size: clamp(10px, 1.5vw, 14px);
    margin-right: 3px;
}

ul.pagination li.next a::after {
    content: '\21E2';
    color: var(--color-senatical-primary-fg);
    font-size: clamp(10px, 1.5vw, 14px);
    margin-left: 3px;
}

ul.pagination li.numbers {
    flex-grow: 10;
}

ul.pagination li.numbers ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

div.paginator p {
    text-align: center;
    font-style: italic;
    font-size: clamp(10px, 1vw, 13px);
}
/* END PAGINATION*/

/* FOOTER */
footer {
    width: 100%;
    min-height: 40px;
    background-color: var(--color-footer-background);
    color: var(--color-footer-foreground);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 90%;
    align-items: center;
    padding: 0 10px;
    margin-top: 10px;
}

div.left {
    text-align: left;
}

div.right {
    text-align: right;
}

div.centre {
    text-align: center;
}
/* END FOOTER */

/* SCROLL TO TOP */
a.backtotop {
    --offset: 50px;
    display: none;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 20px;
    /*margin-top: calc(100vh + var(--offset));*/
    margin-left: calc(100% - 40px);
    text-decoration: none;
    padding: 10px 5px;
    background: var(--color-backtotop);
    border-radius: 30% 0 0 30%;
    white-space: nowrap;
    z-index: 9997;
    height: 50px;
    width: 50px;
    transition: all 0.3s;
}

svg.backtotop {
    fill: var(--color-backtotop);
    height: 30px;
    width: 30px;
}
/* END SCROLL TO TOP*/


/* RECORD AND FIELD LAYOUT */
div.record-layout {
    border: 1px solid var(--color-frame-borders);
    border-radius: 15px;
    /* overflow: clip; */
    padding-bottom: 20px;
    clear: both;
}

div.users.login.content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 10vh;
}

div.record-layout.login {
    width: clamp(250px, 50vw, 500px);
}

svg.question, svg.showpassword, svg.hidepassword {
    width: 2.8rem;
    height: 2.8rem;
    cursor: pointer;
}
svg.question path, svg.showpassword path, svg.hidepassword path {
    stroke: var(--color-highlight-borders);
}
svg.question:hover path, svg.showpassword:hover path, svg.hidepassword:hover path {
    stroke: var(--color-links);
}

div.record-layout.login div.required label::after {
    content: "";
}

/*div.record-layout.login div.required label {*/
div.input-containing-icons label {
    display: none;
}

div.record-layout.login div.submit {
    display: flex;
    justify-content: center;
}
div.input-containing-icons input {
    border: none;
    margin: 0;
    padding: 0;
    height: 2.5rem;
    border-radius: unset;
}

div.input-containing-icons a {
    height: 3rem;
}

div.input-containing-icons {
    border: 0.1rem solid var(--color-highlight-borders);
    border-radius: 0.4rem;
    height: 3.8rem;
    padding: .7rem 0.5rem .6rem;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: stretch;
    gap: 3px;
}

div.record-layout div.submit {
	margin: 0 10px;
}

div.record-layout::before {
    display: block;
    height: 30px;
    font-size: 20px;
    padding: 5px;
    font-weight: bolder;
    text-align: center;
    width: 100%;
    color: var(--color-senatical-primary-fg);
    background-color: var(--color-senatical-primary);
    content: attr(record-heading);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    line-height: normal;
}

ul.record-layout {
    list-style: none;
    column-count: 2;
    width: 100%;
    margin-top: 10px;
}

ul.record-layout.login {
    column-count: 1;
}

li.field-layout {
     display: flex;
     flex-flow: row wrap;
     padding: 10px 0;
     margin: 0 10px;
     break-inside : avoid;
}

li.field-layout input[type="radio"].horizontal + label {
    margin-top: 15px;
}

.view li.field-layout {
    border-bottom: 1px solid lightgray;
}

div.field-layout-label {
    font-weight: bold;
    flex-grow: 10;
    padding: 0 5px;
}

div.field-layout-label img, li.field-layout img {
    height: 158px; /* TODO: review: this entry was added by Ineke to align photo with 4  field rows in people/view and people/addphoto */
}
div.image {
   text-align: center; /* TODO: review: this entry was added by Ineke to center align photo/signature in people/viewphoto and viewsignature*/
}
div.image img {
    padding: 5px; /* TODO: review: this entry was added by Ineke to show some white space above photo/signature in people/viewphoto and viewsignature */

}
div.field-layout-label img.signature, li.field-layout .signature {
    height: 65px; /* TODO: review: this entry was added by Ineke to align photo with 2 field rows in people/view and people/addsignature */
}

div.field-layout-value {
    flex-grow: 0;
    padding: 0 5px;
}

div.input {
    width: 100%;
}

div.record-layout-buttons {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0 13px;
    column-gap: 20px;
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: var(--color-senatical-primary);
    border-color: var(--color-senatical-primary);
    color: var(--color-senatical-primary-fg);
}

.button:focus, .button:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover {
    background-color: var(--color-senatical-secondary);
    border-color: var(--color-senatical-secondary);
    color: var(--color-senatical-secondary-fg);
}

input[type='date'] {
    cursor: pointer;
}

/* END RECORD AND FIELD LAYOUT */

/* DRAGGABLE OBJECT STYLING */
.grab {
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	user-select: none;
	-webkit-user-select: none; /* For Safari */
	-moz-user-select: none;    /* For Firefox */
	-ms-user-select: none;     /* For Internet Explorer/Edge */
	transition: all 0.3s ease;
	touch-action: pan-y;
	-ms-touch-action: pan-y;
}
.grabbing:not(.ui-sortable-placeholder) {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	border: 1px solid var(--color-body-foreground);
	border-radius: 5px;
	box-shadow: 0 5px 5px rgb(0,0,0,0.5);
	background: var(--color-senatical-primary);/* var(--color-body-background); */
	color: var(--color-senatical-primary-fg);
	opacity: 0.8;
	padding-left: 8px;
        user-select: none;
        -webkit-user-select: none; /* For Safari */
        -moz-user-select: none;    /* For Firefox */
        -ms-user-select: none;     /* For Internet Explorer/Edge */
	transition-property: opacity, border, background, padding-left;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}
.grabbing td {
      border-bottom: unset;
}
/* END DRAGGABLE OBJECT STYLING */

/* DRAGABLE LISTS */
#pleaserotate-graphic{
    fill: var(--pleaserotate-fg);
}

#pleaserotate-backdrop {
    color: var(--pleaserotate-fg);
    background-color: var(--pleaserotate-bg);
    z-index: 900000;
}

.dragable-list-layout {
	display: flex;
	flex-direction: row;
}

.dragable-list {
	width: 46%;
	margin: 2%;
}

#source, #destination {
	border: 0.1rem solid var(--color-highlight-borders);
	border-radius: 0.4rem;
	overflow-y: scroll;
	list-style: none;
	padding-left: 10px;
	cursor: grab;
	touch-action: pan-y;
}

#source {
	min-height:200px;
	height: 200px;
}

#destination {
	height: calc(253px + 5.3rem);
	min-height: calc(200px + 5.3rem);
}

.interlist-icons {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding-top: 130px;
}

svg.interlist {
	width: 30px;
	height: 30px;
	fill: var(--color-senatical-secondary);
	stroke: var(--color-senatical-secondary);
	cursor: pointer;
}

svg.interlist:hover {
	transform: scale(1.1);
	filter: drop-shadow(-1px -2px 2px rgb(0 0 0 / 0.2));
}

svg#remove-all {
	margin-left: 8px;
}

svg#add-all {
	margin-right: 8px;
}
/* END DRAGABLE LISTS */


/* WIDE SCREEN */
@media only screen and (min-width:930px){

    /* MENU */
    nav.header-bar {
        padding-left: 20px;
    }
    nav.header-bar ul{
        flex-direction:row;
    }
    nav.header-bar ul li.menulevel1 {
        flex: 1 0 auto;
        border-radius: 15px 15px 0 0;
    }
    nav.header-bar ul li.menulevel2, nav.header-bar ul li.menulevel3 {
        flex: 0 0 auto;
        border-radius: 15px;
    }
    nav.header-bar ul li.menulevel2 a.menulevel2, nav.header-bar ul li.menulevel2 span.menulevel2 {
        color: var(--color-senatical-primary-fg);
    }
    nav.header-bar ul li.menulevel1:hover {
        background-color: var(--color-senatical-primary);
        color: var(--color-senatical-primary-fg);
        z-index: 100000;
    }
    nav.header-bar ul li.menulevel1:hover a.menulevel1, nav.header-bar ul li.menulevel1:hover span.menulevel1 {
        color: var(--color-senatical-primary-fg);
    }
    nav.header-bar ul li.menulevel2:hover {
        color: var(--color-senatical-primary);
        background-color: var(--color-senatical-primary-fg);
    }
    nav.header-bar ul li.menulevel2:hover a.menulevel2, nav.header-bar ul li.menulevel2:hover span.menulevel2 {
        color: var(--color-senatical-primary);
    }
    nav.header-bar ul li.menulevel3 a.menulevel3, nav.header-bar ul li.menulevel3 span.menulevel3 {
        color: var(--color-senatical-secondary-fg);
    }
    nav.header-bar ul li.menulevel3:hover {
        color: var(--color-senatical-secondary);
        background-color: var(--color-senatical-secondary-fg);
    }
    nav.header-bar ul li.menulevel3:hover a.menulevel3, nav.header-bar ul li.menulevel3:hover span.menulevel3 {
        color: var(--color-senatical-secondary);
    }

    nav.header-bar .has-children ul, nav.header-bar .has-children ul .has-children ul{
        display: flex;
        flex-flow: row wrap;
        column-gap: 40px;
        width: 100vw;
        left: 0;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: all 1s;
        justify-content: center;
        align-items: flex-start;
        padding: 10px 5vw;
    }
    nav.header-bar ul li a, nav.header-bar ul li span.nolink {
        padding: .2rem 1rem;
    }
    .has-children ul .has-children ul{
        left: 0;
        top: 100%;
    }
    nav.header-bar ul li:hover ul, nav.header-bar .has-children ul .has-children:hover ul{
        visibility: visible;
        opacity: 1;
        transition: all 0.4s;
    }
    nav.header-bar ul.menulevel2 {
        border: 1px groove rgb(204,204,204,0.5);
        box-shadow: 0 0 5px #444;
        background-color: var(--color-senatical-primary);
    }
    nav.header-bar ul.menulevel3 {
        border: 1px groove rgb(204,204,204,0.5);
        box-shadow: 0 0 5px #444;
        background-color: var(--color-senatical-secondary);
    }
    li.menulevel1 {
        text-align: center;
    }
    li.menulevel2, li.menulevel3 {
        text-align: center;
    }
    /* END MENU */

}
/* END WIDE SCREEN */

/* NARROW SCREEN */
@media only screen and (max-width:930px) {

    /* GENERAL */
    .container {
        padding: 0;
        margin-bottom: 0;
    }
    div.separator-bar {
        margin-bottom: 0;
    }
    .report-comment-column {
        width: unset;
    }
    .select-on-hover {
        position: absolute;
        top: 50px;
        right: 15px;
    }
    tr .select-on-hover-content, li.field-layout .select-on-hover-content {
        left: unset;
        right: -15px;
    }
    /* END GENERAL*/
    /* LOGIN FORM */
    div.record-layout.login {
        width: clamp(250px, 80vw, 500px);
    }
    /* END LOGIN FORM */
    /* MENU */
    nav.header-bar {
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
        display: block;
    }
    nav.header-bar ul.menulevel1 {
        display: none;
        overflow-y: scroll;
        height: calc(100vh - 70px);
    }
    nav.header-bar ul li:hover {
        background-color: var(--color-senatical-primary);
        transition: all 0.1s;
    }
    nav.header-bar ul li.menulevel1:hover a.menulevel1, nav.header-bar ul li.menulevel1:hover span.menulevel1 {
        color: var(--color-senatical-primary-fg);
    }
    nav.header-bar ul li.menulevel2:hover a.menulevel2, nav.header-bar ul li.menulevel2:hover span.menulevel2 {
        color: var(--color-senatical-primary-fg);
    }
    nav.header-bar ul li.menulevel3:hover a.menulevel3, nav.header-bar ul li.menulevel3:hover span.menulevel3 {
        color: var(--color-senatical-primary-fg);
    }
    nav.header-bar ul li.menulevel1 {
        border-top: 1px outset black;
    }
    nav.header-bar .has-children ul li a, nav.header-bar .has-children ul li span.nolink {
        padding-left:3rem;
    }
    nav.header-bar .has-children ul .has-children ul a {
        padding-left:5rem;
    }
    .arrow-right {
        float:none;
    }
    .arrow-down::after{
        content:" \25BC";
    }
    svg.hamburger {
        display: block;
    }
    /* END MENU */


    /* BREADCRUMBS */
    #breadcrumbs {
        display: none;
        width: 100%;
    }
    div#threedots {
        display: block;
    }
    nav.breadcrumbs ul {
        padding: 5px;
        margin: 0;
        border-top: 1px solid darkgrey;
        justify-content: center;
    }
    /* END BREADCRUMBS */


    /* DATA TABLES */
    div.table-responsive {
        max-height: unset;
        border-radius: unset;
        border: none;
    }

    .hide-on-narrow-view {
        display: none;
    }

    table.collapse {
        border: 0;
        margin: 0;
    }

    table.collapse thead {
        display: none;
    }

    table.collapse thead:has(th a) {
        display: block;
        background-color: unset;
        color: var(--color-body-foreground);
        border: unset;
        border-radius: unset;
        cursor: pointer;
        position: relative;
        z-index: 999999;
        margin-bottom: 10px;
        box-shadow: unset;
        overflow: visible;
    }

    table.collapse thead::before {
        content: "Sort by ▾"; /* Down arrow indicator */
        display: block;
        font-weight: bold;
    }

    table.collapse thead tr {
        display: none;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-evenly;
        border: none;
        border-radius: 20px;
        background-color: var(--color-senatical-secondary);
        color: var(--color-senatical-secondary-fg);
        position: absolute;
        top: 25px;
        left: 10px;
        right: 10px;
        padding: 10px 0;
    }

    table.collapse thead:hover tr, table.collapse thead:focus-within tr {
        display: flex;
        z-index: 9999999;
        box-shadow: 0 4px 10px var(--color-index-shadows);
    }

    table.collapse thead th {
        display: none;
        border-bottom: unset;
        padding: 5px 15px 0 15px;
        position: relative;
    }

    table.collapse thead th:has(a) {
        display: block;
    }

    table.collapse thead th a {
        color: var(--color-senatical-secondary-fg);
    }

    table.collapse thead th a.asc:after {
        content: " \2193";
        font-size: 180%;
        font-weight: bolder;
        position: absolute;
        top: -5px;
        right: 0;
    }

    table.collapse thead th a.desc:after {
        content: " \2191";
        font-size: 180%;
        font-weight: bolder;
        position: absolute;
        top: -5px;
        right: 0;
    }

    table.collapse tr {
        border: 1px solid var(--color-frame-borders);
        border-radius: 15px;
        display: block;
        margin-bottom: 15px;
        /* overflow: hidden; */
    }

    table.collapse tr[collapsed-heading="Filters"] {
        padding-bottom: 20px;
    }

    table.collapse tbody tr::before {
        display: block;
        height: 30px;
        font-size: 20px;
        /* padding: 5px; */
        font-weight: bolder;
        text-align: center;
        width: 100%;
        color: var(--color-senatical-primary-fg);
        background-color: var(--color-senatical-primary);
        content: attr(collapsed-heading);
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    table.collapse td, table.collapse td:first-child {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        column-gap: 15px;
        font-size: 14px;
        margin: 0 10px;
        padding: 0 10px 0 10px;
        min-height: 24px;
    }

    table.collapse td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 5px;
        /*margin-bottom: 10px;*/
        margin-top: 10px;
        text-align: left;
        width: 100%;
    }

    tr[collapsed-heading='Filters'] td:empty {
        display: none;
    }

    table.collapse td.actions {
        justify-content: center;
        border-bottom: 0;
        margin: 20px 0 0 0;
        width: 100%;
        max-width: unset;
        min-width: unset;
        padding: 10px;
    }

    table.collapse td.actions svg.table-action {
        fill: var(--color-senatical-secondary);
    }

    table.collapse td.actions svg.table-action-stroke {
    	stroke: var(--color-senatical-secondary);
    }

    table.collapse td:last-child {
        border-bottom: 0;
    }

    tr:nth-child(even) {
        background-color: unset;
    }

    td.longtext {
        min-width: unset;
    }

    td.longtext div {
        width: 100%;
        margin-bottom: 10px;
    }


    /* @supports selector(:has(*)) {
	    td:has(input.horizontal) label:hover span {
        	opacity: 0;
    	    }

	    td:has(input.horizontal):before {
	    	height: 4rem;
	    }

	    table.collapse td:has(input.horizontal) {
		display: grid;
	    }

	    td:has(input.horizontal) {
	    	height: unset;
	    }

	    td:has(input.horizontal) label span {
	        display: none;
	    }
    } */

    table.collapse td.break-column, table.collapse th.break-column {
    	display: none;
    }

    table.collapse td.horiz-radio-table-labels {
	display: grid;
    	border-bottom: unset;
        /* This seems to have caused problems with the layout, and can't remember why it was here to begin with
        height: 26px;*/
    }

    table.collapse td.horiz-radio-table-labels::before {
	visibility: hidden;
    	color: white;
    	-webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }
    /* END DATA TABLES */

    /* PAGINATION */
    ul.pagination {
        border: none;
        border-radius: unset;
    }
    /* END PAGINATION */

    /* SCROLL TO TOP */
    a.backtotop:hover {
        transform: unset;
    }
    /* END SCROLL TO TOP */

    /* RECORD AND FIELD LAYOUT */
    ul.record-layout {
        list-style: none;
        column-count: 1;
        width: 100%;
    }
    /* END RECORD AND FIELD LAYOUT */
}
/* END NARROW SCREEN */

/* VERY NARROW SCREEN */
@media only screen and (max-width:630px) {
	.dragable-list-layout {
		flex-direction: column;
	}
	.dragable-list {
		width: 96%;
	}
	#destination {
		min-height:200px;
		height: 200px;
	}

	.interlist-icons {
		flex-direction: row;
		padding-top: 0;
	}

	svg#remove-all, svg#add-all {
		margin-left: 0;
		margin-right: 0;
		transform: rotate(90deg);
	}
	svg#remove-all:hover, svg#add-all:hover {
		transform: rotate(90deg) scale(1.1);
		filter: drop-shadow(-1px -2px 2px rgb(0 0 0 / 0.2));
	}

}
/* END VERY NARROW SCREEN */


/* ANIMATIONS */
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1.1, 1.1, 1.1);
    }
}

/*added by Ineke; todo: ask Neil to improve :-) */
div.textarea-counter {
    font-size: 0.9em;
    margin-top: -20px;
    font-style: italic;
}