/*
 * Back office (IDCWeb) - one look for every page.  HellenicSSF/ams-back-office#8
 *
 * Display only: nothing here changes what a page does. The pages keep their PrimeFaces components and ids; this file
 * gives them common values (colour, type, spacing) and a common shell (header, page bar, filters, tables, record views).
 * Loaded after the PrimeFaces theme (saga), so equal selectors here win.
 */

/* ---------------------------------------------------------------- values */
:root {
    --brand: #004276;          /* the blue of the IKY logo: header, headings */
    --accent: #0b63ce;         /* links, primary buttons, focus */
    --accent-dark: #0950a8;
    --ok: #2e7d32;
    --ok-bg: #e7f4e8;
    --warn: #9a5b00;
    --warn-bg: #fdf1dc;
    --danger: #c62828;
    --danger-bg: #fdeaea;
    --info-bg: #e6f0fb;
    --text: #1f2933;
    --muted: #5f6b7a;
    --line: #d9dee5;
    --surface: #ffffff;
    --surface-2: #eef2f7;      /* table headers, bars */
    --page: #f5f7fa;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

html, body {
    padding: 0;
    margin: 0;
    background-color: var(--page);
    color: var(--text);
    font-size: 14px;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body .ui-widget,
body .ui-widget .ui-widget {
    font-family: inherit;
}

body .ui-commandlink,
body .ui-link {
    font-size: 1rem;
    color: var(--accent);
}

body a:hover,
body .ui-commandlink:hover {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------- spinners */
.icn-spinner {
    animation: spin-animation 1s linear infinite;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* the page spinner sits in the header, next to the name of the application */
.lds-dual-ring {
    display: none;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin: 1px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------- header */
.topMenu,
.ui-widget-header.topMenu {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    box-sizing: border-box;
    padding: 8px 24px;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 900;
}

.topMenu .logo,
.topMenu .logo2 {
    height: 40px;
    width: auto;
    margin: 0;
    vertical-align: middle;
}

.topMenu .text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}

.topMenu .text br {
    display: none;
}

.topMenu .text label,
.topMenu .text .ui-outputlabel {
    font-size: 16px !important;
    font-weight: 600;
    color: #fff;
}

/* «Πρόγραμμα» / «Κύκλος» for every page (ams-back-office#35) */
.topMenu .topSelector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

/* only the words «Πρόγραμμα» and «Κύκλος», the bar's own labels: not the label inside a menu, which holds the
   chosen programme and was white on the white box (#87) */
.topMenu .topSelector > label,
.topMenu .topSelector > .ui-outputlabel {
    color: #fff;
    font-size: 13px;
    padding: 0 !important;
}

.topMenu .topSelector .ui-selectonemenu .ui-selectonemenu-label {
    color: #1f2937;
}

/* the lists of the two menus, opened in the page (appendTo="@(body)") rather than inside the header */
.top-selector-panel .ui-selectonemenu-item,
.top-selector-panel .ui-selectonemenu-filter {
    color: #1f2937;
}

.topMenu .topSelector .program-select {
    width: 420px;
    max-width: 38vw;
}

.topMenu .topSelector .cycle-select {
    width: 90px;
}

.topMenu .userLogout {
    margin: 0;
    float: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.topMenu .userLogout label,
.topMenu .userLogout .ui-outputlabel {
    padding: 0 !important;
    color: #fff;
    font-size: 13px;
}

.topMenu .userLogout .link-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    font-size: 13px;
    padding: 5px 10px;
}

.topMenu .userLogout .link-button:hover {
    background: rgba(255, 255, 255, .12);
    opacity: 1;
}

/* ---------------------------------------------------------------- page */
.mainContent {
    font-family: inherit;
    display: block;
    box-sizing: border-box;
    max-width: 1680px;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

/* page bar: «back», title of the page */
.application-top-div {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    text-align: left;
}

.application-top-div h3 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand);
}

.application-top-div h3 label,
.application-top-div h3 .ui-outputlabel {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* filters under the page bar: a label, then the menu */
.filter-bar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 16px;
}

.filter-bar .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.list-count {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--muted);
}

.list-count strong {
    color: var(--text);
}

/* «Κείμενο»: the start e-mail or the reminder as the scholar will read it, under whom it goes to */
.mail-preview {
    margin: 10px 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}

.mail-preview-head {
    padding: 8px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    font-size: 13px;
    line-height: 1.6;
}

.mail-preview-body {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    background: #fff;
}

/* «Υπογραφή όλων» over the list «Προς υπογραφή Προέδρου» (HellenicSSF/ams-back-office#25): the button, what it does,
   and how far it has got */
.sign-all {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 13px;
}

.sign-all-hint {
    color: var(--muted);
}

.sign-all-progress {
    font-weight: 600;
    color: var(--text);
}

/* «Πρόγραμμα» over a list (HellenicSSF/ams-back-office#14): label and menu on one line, the menu no wider than
   the page, a long programme name cut with its full text in the menu itself */
.list-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
}

.list-filter .ui-selectonemenu {
    min-width: 16rem;
    max-width: 40rem;
}

.list-filter .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Προγράμματα grants»: Πρόγραμμα → Υποπρόγραμμα → Έτος on one line, wrapping on a narrow screen; the year short */
.grants-choice {
    flex-wrap: wrap;
}

.grants-choice > span {
    display: contents;
}

.grants-choice .ui-selectonemenu.grants-select {
    width: 30rem;
}

.grants-choice .ui-selectonemenu.grants-year-select {
    min-width: 12rem;
    width: 14rem;
}

/* a choice among a few (p:selectOneButton, e.g. «Αναφορά: Όλες / 1η / 2η»): the options white with the accent's text,
   the chosen one filled. The rule of every button below (accent background, no border) is more specific and has
   !important on the border, so these win with !important too: otherwise the unchosen ones were dark text on blue. */
body .ui-selectonebutton .ui-button {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--accent) !important;
}

body .ui-selectonebutton .ui-button .ui-button-text {
    color: inherit;
}

body .ui-selectonebutton .ui-button:not(.ui-state-active):hover {
    background: var(--info-bg) !important;
    border-color: var(--accent) !important;
    color: var(--accent-dark) !important;
}

body .ui-selectonebutton .ui-button.ui-state-active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.list-note {
    margin: 0 0 8px;
    font-size: 13px;
}
.empty-hint {
    display: none;
    margin: 24px 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* shown only while the area before it is hidden (no programme chosen yet) */
[id$="tablesArea"][style*="display: none"] + .empty-hint {
    display: block;
}

.muted {
    color: var(--muted);
}

.nowrap,
body .ui-datatable .ui-datatable-data > tr > td.nowrap {
    white-space: nowrap;
}

/* ---------------------------------------------------------------- stages (tracker) */
/* the path a scholar's contract follows; a step is a link that shows the list of that stage */
.stage-tracker {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    gap: 8px 0;
    margin: 0 0 18px;
}

body .stage-tracker a.stage {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    box-sizing: border-box;
    padding: 9px 12px 9px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

body .stage-tracker a.stage:first-child {
    padding-left: 14px;
    border-left-width: 1px;
    border-radius: var(--radius) 0 0 var(--radius);
}

/* the arrow between two steps */
body .stage-tracker a.stage::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    z-index: 1;
    width: 14px;
    height: 14px;
    background: inherit;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}

body .stage-tracker a.stage:hover {
    background: var(--surface-2);
}

body .stage-tracker a.stage.stage-active {
    background: var(--info-bg);
    border-color: var(--accent);
    box-shadow: inset 0 -3px 0 var(--accent);
}

body .stage-tracker a.stage.stage-active::after {
    border-color: var(--accent);
}

.stage-tracker .stage-no {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.stage-tracker .stage-active .stage-no {
    background: var(--accent);
    color: #fff;
}

.stage-tracker .stage-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stage-tracker .stage-name {
    font-weight: 600;
}

.stage-tracker .stage-hint {
    font-size: 12px;
    color: var(--muted);
}

/* what follows the contract starts a row of its own (ams#122): the break, and the left edge of its first step */
.stage-tracker .stage-break {
    flex: 0 0 100%;
    height: 0;
}

body .stage-tracker a.stage.stage-row-start {
    padding-left: 14px;
    border-left-width: 1px;
    border-radius: var(--radius) 0 0 var(--radius);
}

/* the last step of the path has no arrow */
body .stage-tracker a.stage:nth-last-child(2) {
    border-radius: 0 var(--radius) var(--radius) 0;
}

body .stage-tracker a.stage:nth-last-child(2)::after {
    display: none;
}

/* «returned for correction» is off the path: it stands apart, with no arrow */
body .stage-tracker a.stage.stage-side {
    flex: 0 1 auto;
    margin-left: 22px;
    padding-left: 14px;
    border-left-width: 1px;
    border-style: dashed;
    border-radius: var(--radius);
}

body .stage-tracker a.stage.stage-side::after {
    display: none;
}

body .stage-tracker a.stage.stage-side.stage-active {
    border-style: solid;
}

/* ---------------------------------------------------------------- menus (selectOneMenu) */
body .mainContent .ui-selectonemenu {
    font-size: 14px !important;
    margin: 0 !important;
    max-width: 100%;
    vertical-align: middle;
}

body .ui-selectonemenu .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the programme menu: as wide as the page allows, never wider (titles reach 280 characters) */
body .mainContent .ui-selectonemenu.program-select,
body .mainContent [id$="programSelect"].ui-selectonemenu {
    width: 760px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body .ui-selectonemenu-panel {
    max-width: min(900px, 96vw);
}

body .ui-selectonemenu-panel .ui-selectonemenu-item {
    white-space: normal;
    line-height: 1.35;
}

/* menus inside table headers (column filters) */
body .ui-datatable thead th .ui-selectonemenu {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 12px !important;
}

/* ---------------------------------------------------------------- buttons */
body .ui-button {
    font-size: 14px;
}

.ui-button.ui-state-default {
    border: none !important;
}

body .ui-button:not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-secondary):not(.ui-button-flat):not(.ui-button-outlined):not(.ui-fileupload-choose) {
    background: var(--accent);
}

body .ui-button.ui-state-hover:not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-secondary):not(.ui-button-flat):not(.ui-button-outlined):not(.ui-fileupload-choose) {
    background: var(--accent-dark);
}

body .ui-button.ui-state-disabled {
    opacity: .45;
    cursor: not-allowed !important;
}

body .ui-button .ui-button-text {
    white-space: nowrap;
}

.link-button {
    background-color: var(--accent);
    color: white !important;
    border: 2px solid var(--accent);
    padding: 3px 8px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.link-button i {
    margin-left: 5px;
}

.link-button:hover {
    text-decoration: none !important;
    opacity: .9;
}

/* buttons inside table rows are smaller, so that a row stays one line high */
body .ui-datatable .ui-datatable-data > tr > td .ui-button {
    font-size: 13px;
}

body .ui-datatable .ui-datatable-data > tr > td .ui-button.ui-button-text-icon-left .ui-button-text,
body .ui-datatable .ui-datatable-data > tr > td .ui-button.ui-button-text-only .ui-button-text {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* icon links inside tables (download, open, preview): a target one can hit */
body .ui-datatable td a:has(> i.fa:only-child),
body .ui-datatable td a:has(> i.pi:only-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 5px;
    font-size: 15px !important;
    color: var(--accent);
}

body .ui-datatable td a:has(> i.fa:only-child):hover,
body .ui-datatable td a:has(> i.pi:only-child):hover {
    background: var(--info-bg);
}

/* ---------------------------------------------------------------- tables */
.ui-datatable-tablewrapper {
    width: 100%;
    overflow-x: auto;
}

.ui-datatable table {
    table-layout: auto;
}

body .ui-datatable .ui-datatable-tablewrapper > table {
    table-layout: auto;
    width: 100%;
}

body .ui-datatable thead th,
body .ui-datatable .ui-datatable-scrollable-header thead th {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    font-size: 13px;
    font-weight: 600;
    text-align: left !important;
    vertical-align: bottom;
    padding: 9px 10px;
    line-height: 1.3;
}

body .ui-datatable thead th .ui-column-title {
    display: inline-block;
    min-width: 4.5em;
}

body .ui-datatable thead th .ui-sortable-column-icon {
    color: var(--muted);
    font-size: 12px;
}

body .ui-datatable thead th .ui-column-filter {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 70px;
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 12px;
}

body .ui-datatable .ui-datatable-data > tr > td {
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.35;
    text-align: left !important;
    border-color: var(--line);
    color: var(--text);
}

body .ui-datatable .ui-datatable-data > tr > td label,
body .ui-datatable .ui-datatable-data > tr > td .ui-outputlabel {
    font-size: inherit;
}

body .ui-datatable .ui-datatable-data > tr.ui-widget-content:hover > td {
    background: #f7f9fc;
}

body .ui-datatable .ui-datatable-data > tr.row-open > td {
    background: var(--info-bg) !important;
    box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}

body .ui-datatable .ui-datatable-data > tr.ui-datatable-empty-message > td {
    padding: 22px 12px;
    text-align: center !important;
    color: var(--muted);
}

/* the running number, and cells that hold only an icon, sit in the middle */
body .ui-datatable thead th.col-idx,
body .ui-datatable .ui-datatable-data > tr > td.col-idx {
    width: 2.5rem;
    text-align: right !important;
    color: var(--muted);
}

body .ui-datatable .ui-datatable-data > tr > td:has(> a > i:only-child):not(:has(> a + a)),
body .ui-datatable .ui-datatable-data > tr > td.col-center,
body .ui-datatable thead th.col-center {
    text-align: center !important;
}

/* the column of actions stays in view when a wide table scrolls sideways */
body .ui-datatable thead th.col-actions,
body .ui-datatable .ui-datatable-data > tr > td.col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    text-align: center !important;
    white-space: nowrap;
    box-shadow: -1px 0 0 var(--line);
}

body .ui-datatable .ui-datatable-data > tr > td.col-actions {
    background: var(--surface);
}

body .ui-datatable .ui-datatable-data > tr.ui-widget-content:hover > td.col-actions {
    background: #f7f9fc;
}

body .ui-datatable thead th.col-name,
body .ui-datatable .ui-datatable-data > tr > td.col-name {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--line);
}

body .ui-datatable .ui-datatable-data > tr > td.col-name {
    background: var(--surface);
    font-weight: 600;
}

body .ui-datatable .ui-datatable-data > tr.ui-widget-content:hover > td.col-name {
    background: #f7f9fc;
}

/* wide tables: a shade inside the pinned column, at the edge the rest of the table scrolls under.
   (inside the cell: PrimeFaces cells clip whatever sticks out of them) */
body .ui-datatable.wide-table thead th.col-actions {
    background: linear-gradient(to right, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0) 12px), var(--surface-2) !important;
}

body .ui-datatable.wide-table .ui-datatable-data > tr > td.col-actions {
    background: linear-gradient(to right, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0) 12px), var(--surface);
}

body .ui-datatable.wide-table .ui-datatable-data > tr.ui-widget-content:hover > td.col-actions {
    background: linear-gradient(to right, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0) 12px), #f7f9fc;
}

body .ui-datatable.wide-table thead th.col-name {
    background: linear-gradient(to left, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0) 12px), var(--surface-2) !important;
}

body .ui-datatable.wide-table .ui-datatable-data > tr > td.col-name {
    background: linear-gradient(to left, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0) 12px), var(--surface);
}

body .ui-datatable.wide-table .ui-datatable-data > tr.ui-widget-content:hover > td.col-name {
    background: linear-gradient(to left, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0) 12px), #f7f9fc;
}

body .ui-datatable.wide-table thead th.col-actions,
body .ui-datatable.wide-table .ui-datatable-data > tr > td.col-actions {
    padding-left: 16px;
}

body .ui-datatable.wide-table thead th.col-name,
body .ui-datatable.wide-table .ui-datatable-data > tr > td.col-name {
    padding-right: 16px;
}

.applications-table th,
.applications-table td {
    text-align: left !important;
}

.field-value-column {
    word-break: break-word;
}

.field-value-column a:first-of-type {
    margin-right: 10px;
}

body .ui-datatable .ui-datatable-header {
    background: var(--surface);
    border-color: var(--line);
    text-align: left;
    font-weight: 600;
}

body .ui-paginator {
    background: var(--surface);
    border-color: var(--line);
    font-size: 13px;
}

.ui-paginator-bottom .ui-paginator-current,
.ui-paginator-bottom .ui-paginator-rpp-options {
    margin-top: 2px !important;
}

.ui-paginator-bottom .ui-paginator-jtp-select {
    margin-left: 5px;
}

/* ---------------------------------------------------------------- status labels */
.chip,
body .ui-datatable td label.chip,
body .ui-outputlabel.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text);
}

.chip-todo {
    background: var(--warn-bg) !important;
    color: var(--warn) !important;
}

.chip-busy {
    background: var(--info-bg) !important;
    color: var(--accent-dark) !important;
}

.chip-ok {
    background: var(--ok-bg) !important;
    color: var(--ok) !important;
}

.chip-no {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
}

/* status of an application by its code: 0 to check, 1 being checked, 2 eligible, 3 not eligible */
.chip-a0 {
    background: var(--warn-bg) !important;
    color: var(--warn) !important;
}

.chip-a1 {
    background: var(--info-bg) !important;
    color: var(--accent-dark) !important;
}

.chip-a2 {
    background: var(--ok-bg) !important;
    color: var(--ok) !important;
}

.chip-a3 {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
}

/* status of an objection by its code: 0 to check, 1 being checked, 2 sent to the board, 3 back from the board, 4 completed */
.chip-o0,
.chip-o3 {
    background: var(--warn-bg) !important;
    color: var(--warn) !important;
}

.chip-o1,
.chip-o2 {
    background: var(--info-bg) !important;
    color: var(--accent-dark) !important;
}

.chip-o4 {
    background: var(--ok-bg) !important;
    color: var(--ok) !important;
}

.green {
    color: var(--ok);
    font-weight: 600;
}

.red {
    color: var(--danger);
    font-weight: 600;
}

.overridden-value-icon {
    font-size: 1.3rem !important;
    color: #eabd07 !important;
    margin-left: 5px;
}

.has-objection-icon {
    font-size: 1.3rem !important;
    color: #cc790e !important;
    margin-left: 5px;
}

.has-possible-lists-icon {
    font-size: 1.3rem !important;
    color: #21a30f !important;
    margin-left: 5px;
}

/* ---------------------------------------------------------------- menu of the application (hub) */
.main-hub-div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    grid-gap: 20px;
    padding: 12px 0;
}

.main-hub-div .ui-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.main-hub-div .ui-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
    transform: translateY(-1px);
}

.main-hub-div .ui-card .ui-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.main-hub-div .ui-card .ui-card-title {
    color: var(--brand);
    font-size: 18px;
}

.main-hub-div .ui-card .ui-card-subtitle {
    color: var(--muted);
    font-weight: 400;
    line-height: 1.4;
}

.main-hub-div .ui-card .ui-card-footer {
    margin-top: auto;
}

.main-hub-link-button a {
    text-decoration: none;
}

/* the whole card opens the page, not only its button */
.main-hub-div .ui-card .main-hub-link-button a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--radius);
}

/* ---------------------------------------------------------------- record views (scholar, application, objection, meeting) */
.record-card {
    margin: 16px 0 24px;
    padding: 18px 20px 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    scroll-margin-top: 70px;
}

/* the record of a scholar opens at the side of the list (a drawer) */
@keyframes drawer-in {
    from {
        transform: translateX(40px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 950;
    background: rgba(16, 24, 40, .4);
    animation: backdrop-in .15s ease-out;
}

.record-card.record-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    width: min(980px, 94vw);
    box-sizing: border-box;
    margin: 0;
    padding: 0 24px;
    overflow-y: auto;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: -10px 0 30px rgba(16, 24, 40, .25);
    animation: drawer-in .18s ease-out;
}

/* the page behind an open drawer does not scroll */
body:has(.record-drawer) {
    overflow: hidden;
}

.drawer-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 -24px 14px;
    padding: 16px 24px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.drawer-title {
    flex: 1 1 auto;
    min-width: 0;
}

.drawer-title h3 {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand);
}

.drawer-sub {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--muted);
}

.drawer-x {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
}

.drawer-x:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--line);
}

.record-drawer .button-div.record-actions {
    margin: 8px -24px 0;
    padding: 12px 24px;
    border-radius: 0;
}

.record-section {
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* the strip of «label: value» under the title of a record */
.application-details-div {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 28px;
    margin: 0 0 14px;
}

.application-details-inner-div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
}

.application-details-inner-div h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.application-details-inner-div label,
.application-details-inner-div .ui-outputlabel {
    font-size: inherit;
}

/* links of a record («download», «show the application») look like quiet buttons */
.application-details-div > a.ui-commandlink,
.application-details-div > .ui-commandlink,
.record-links > a.ui-commandlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 5px;
    margin-left: 0 !important;
}

.application-details-div > a.ui-commandlink:hover,
.record-links > a.ui-commandlink:hover {
    background: var(--info-bg);
}

.record-links {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    margin: 10px 0;
}

body .record-card .ui-panelgrid.ui-panelgrid-blank {
    margin: 4px 0 8px !important;
}

body .record-card .ui-panelgrid .ui-panelgrid-cell {
    padding: 6px 10px 6px 0;
    line-height: 1.4;
    word-break: break-word;
}

.field-label {
    font-weight: 600;
    color: var(--muted);
}

.record-card .approval-div {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.approval-div {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
}

.comments-div {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    margin: 8px 0;
}

.comments-div textarea,
.comments-div .ui-inputtextarea {
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
}

.comments-div label:nth-of-type(1) {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
}

.comments-div label:nth-of-type(2) {
    text-align: right;
    font-size: 12px;
    margin-top: 5px;
    color: var(--muted);
}

.comments-details-div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row wrap;
    gap: 8px 28px;
    width: 100%;
    max-width: 920px;
    margin: 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

/* the buttons of a record: side by side, apart from each other, never wrapped inside */
.button-div,
.ui-panel.button-div {
    width: auto;
    background: transparent;
    border: 0;
}

.button-div .ui-panel-content {
    font-size: 1em;
    margin-top: 10px;
    padding: 0 !important;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
    background: inherit !important;
    border: none !important;
}

.button-div .ui-panel-content .ui-button {
    margin: 0 !important;
}

/* scholar's record: «close» apart on the left, the decision on the right, the bar stays in view */
.button-div.record-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 8px -20px 0;
    padding: 10px 20px;
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 0 var(--radius) var(--radius);
}

.button-div.record-actions .ui-panel-content {
    margin-top: 0;
    justify-content: flex-end;
}

.button-div.record-actions .ui-panel-content .btn-close {
    order: -1;
    margin-right: auto !important;
}

body .ui-button.btn-close,
body .ui-button.btn-close.ui-state-default {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line) !important;
}

body .ui-button.btn-close.ui-state-hover {
    background: var(--surface-2);
    color: var(--text);
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: var(--info-bg);
    color: var(--text);
}

.buttonPanel {
    padding: 1em .5em .5em;
    text-align: center;
}

.infoLabel {
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
}

.atomikiKartelaLabel {
    color: var(--brand);
    font-size: 1.1em;
    font-weight: bold;
}

.floatR {
    float: right;
}

/* ---------------------------------------------------------------- sign-in page */
.login-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.login-brand img {
    height: 72px;
    width: auto;
}

.login-brand .login-app-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--brand);
}

.loginPanel,
.loginPanel.ui-panel {
    width: 100%;
    max-width: 380px;
    margin: 0;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.loginPanel.ui-panel .ui-panel-titlebar {
    background: transparent;
    color: var(--text);
    border: 0;
    padding: 20px 24px 0;
    font-size: 16px;
}

.loginPanel.ui-panel .ui-panel-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 12px 24px 4px;
    border: 0;
}

.loginPanel .infoLabel {
    display: block;
    margin: 12px 0 5px;
    text-align: left;
}

.loginPanel .inputField,
.loginPanel .ui-inputfield {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    font-size: 15px;
    padding: 9px 10px;
}

.loginPanel.ui-panel .ui-panel-footer {
    border: 0;
    background: transparent;
    padding: 16px 24px 24px;
}

.login-footer-div {
    display: flex;
    justify-content: stretch;
}

.login-footer-div .link-button {
    flex: 1 1 auto;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 600;
}

.login-contact {
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ---------------------------------------------------------------- dialogs */
.board-meeting-dialog-div {
    display: grid;
    grid-template-columns: 170px 280px;
    grid-row-gap: 10px;
    align-items: center;
}

.board-meeting-dialog-div .p-datepicker .ui-inputfield {
    width: 100%;
}

.board-meeting-dialog-div .file-upload {
    grid-column-start: 1;
    grid-column-end: 3;
}

.file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-upload .ui-fileupload-simple {
    margin-top: 8px;
}

/**** PrimeFaces Customizations ****/

.ui-wizard-step-title {
    font-size: 1.1em;
}

.ui-draggable .ui-dialog-titlebar {
    text-align: center;
}

.ui-dialog .ui-dialog-title {
    float: none !important;
}

.ui-growl-image {
    background-image: url(/idc/javax.faces.resource/images/msg_icons.png.xhtml);
}

.ui-corner-all {
    border-radius: 4px;
}

.ui-corner-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ui-corner-bottom {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ui-corner-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border-color: var(--line);
    transition: .2s;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border-color: var(--accent);
    transition: .2s;
}

/***********************************/

@media screen and (max-width: 800px) {
    .topMenu,
    .ui-widget-header.topMenu {
        padding: 8px 12px;
    }

    .mainContent {
        padding: 14px 12px 32px;
    }
}

/**********************************/
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    margin: 8rem 2rem;
}

.diagnostics-card {
    margin-top: 2rem;
}

/* a contract that comes back after a return: what the scholar had been asked to correct, above his data */
.earlier-returns {
    margin: 0 0 12px;
}

.earlier-return {
    margin: 0 0 8px;
    padding: 10px 14px;
    border-left: 4px solid #b45309;
    border-radius: 4px;
    background: #fff7ed;
}

.earlier-return-meta {
    margin-bottom: 4px;
    font-size: 12px;
    color: #5a6b7b;
}

.earlier-return-note {
    white-space: pre-line;
}

.chip.row-chip {
    margin-left: 6px;
}

/* «Σύνοψη» of the scholars' contracts: one small table per programme */
.summary-block {
    max-width: 1040px;
    margin: 0 0 20px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}

.summary-table th,
.summary-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e3e7ec;
    text-align: left;
}

.summary-table th {
    background: #f4f6f9;
    font-weight: 600;
}

.summary-table .num {
    width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.summary-table tr.summary-total td {
    font-weight: 700;
    border-top: 2px solid #cfd6de;
}

/* under the totals: of the scholars at one stage after the contract, where they stand (a head, then its lines) */
.summary-table tr.summary-head td {
    padding-top: 14px;
    font-weight: 600;
    background: #f4f6f9;
}

.summary-table tr.summary-detail td:first-child {
    padding-left: 28px;
}

/* the two running sums of «Σύνοψη»: a little apart from the counts, the share next to the number */
.summary-table .run {
    width: 11rem;
    border-left: 1px solid #e3e7ec;
    white-space: nowrap;
}

.summary-table .run .muted {
    display: inline-block;
    min-width: 3.6rem;
    font-size: 12px;
}

/* the reports of a programme, one column per report («Αναφορές προόδου υποτρόφων» and «Σύνοψη») */
.report-breakdown {
    margin: 8px 0 12px;
}

.report-breakdown th.num,
.report-breakdown td.num {
    width: auto;
    min-width: 6rem;
}

.report-breakdown td.num .muted {
    display: inline-block;
    min-width: 2.6rem;
    font-size: 12px;
}

/* «↳ από αυτούς, έληξε η προθεσμία»: a note on the scholar's steps, not a step */
.report-breakdown tr.report-late td {
    color: #a15c00;
    font-style: italic;
    font-size: 12px;
}

/* step 4, IKY's work: what the page is for */
.report-breakdown tr.report-ours td {
    font-weight: 700;
}

/* the link of step 4 to «Προς έλεγχο»: the accent, also once visited */
.report-breakdown a,
.report-breakdown a:visited {
    color: var(--accent);
    text-decoration: none;
}

.report-breakdown a:hover {
    text-decoration: underline;
}

/* above the table: one line per report with submissions */
.report-headlines {
    margin: 4px 0 8px;
    padding-left: 18px;
    font-size: 13px;
}

/* «Αναφορές προόδου υποτρόφων»: the scholar's files of a report with deliverables, under its download (ams#145) */
.report-part {
    margin-top: .25rem;
    font-size: .8rem;
    line-height: 1.2;
    text-align: left;
}

/* «Αναφορές προόδου υποτρόφων»: the report in the drawer - its details in folds on top, the decision at the bottom */
.record-drawer .report-accordion {
    margin: 12px 0 16px;
}

.record-drawer .report-accordion .ui-accordion-header {
    font-size: 14px;
}

.record-drawer .report-files .report-parts {
    margin-top: 10px;
}

.record-drawer .report-files .report-part {
    padding: 4px 0;
    font-size: 13px;
}