/*
 * Legenda:
 *     .path-mod-surveypro #userentry              form to preview and to submit a response;
 *     .path-mod-surveypro #usersearch             form to search a response;
 *     .path-mod-surveypro #userentry .frozen      readonly response
 *     .path-mod-surveypro table#manageitems       table to manage items
 *     .path-mod-surveypro table#sortitems         table to sort items
 *     .path-mod-surveypro table#validaterelations table to validate relations
 */

/* Begin of: colours alternation for #layout_preview, #view_userentry, #view_usersearch forms and read-only table */
.path-mod-surveypro #userentry div.row:nth-of-type(odd),
.path-mod-surveypro #usersearch div.row:nth-of-type(odd) {
    background-color: #ededed;
}
/* End of: colours alternation for #userentry, #usersearch forms and read-only table */

/* Begin of: hacky coluorunifier html element */
.path-mod-surveypro #userentry div.colorunifier,
.path-mod-surveypro #usersearch div.colorunifier {
    display: none;
}
/* End of: hacky coluorunifier html element */

/* Begin of: connect note to question */
/* stylelint-disable declaration-no-important */
.path-mod-surveypro .narrowlines > div.fitem,
.path-mod-surveypro .narrowlines > fieldset > div > div.fitem {
    margin-bottom: 0 !important;
}
/* stylelint-enable declaration-no-important */
/* End of: connect note to question */

/* Begin of: no margin bottom to p inside question in SURVEYPRO_POSITIONTOP and SURVEYPRO_POSITIONFULLWIDTH */
.path-mod-surveypro .mform .fitem > div.fullwidth > p {
    margin: 0 1em 0 1em;
}
/* End of: no margin bottom to p inside question in SURVEYPRO_POSITIONTOP and SURVEYPRO_POSITIONFULLWIDTH */

.path-mod-surveypro .mform .fitem .felement label {
    margin-right: 1em;
}

/* The box on the left usually displaying the question */
.path-mod-surveypro div.col-form-label {
    /* background-color: red; */
    padding-top: 0;
}

.path-mod-surveypro div.userentry {
    padding: 3em;
}

/* Begin of: #manageitems, #sortitems and #validaterelations tables*/
.path-mod-surveypro table th {
    vertical-align: inherit;
}

.path-mod-surveypro table td {
    vertical-align: inherit;
}

.path-mod-surveypro table {
    width: 100%;
}

.path-mod-surveypro table .plugin {
    text-align: center;
}

.path-mod-surveypro table#manageitems .hide {
    display: none;
}

.path-mod-surveypro table td.plugin {
    width: 0.5em;
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
}

.path-mod-surveypro table td.plugin span.pluginicon {
    /*width: 0.5em;*/
    padding: 0.5em;
    margin: 0;
    text-align: center;
    vertical-align: middle;
}

.path-mod-surveypro table td.sortindex {
    width: 0.5em;
    padding: 0.5em;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table td.parentitem {
    width: .5em;
    padding: .5em;
    margin: 0;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.path-mod-surveypro table td.parentitem span.branch .icon {
    width: 16px;
    padding: 0 .1em 0 .1em;
    margin: 0 .1em 0 .1em;
}

.path-mod-surveypro table td.customnumber {
    width: 0.5em;
    padding: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table td.content {
    padding: 0.5em;
    vertical-align: middle;
}

.path-mod-surveypro table td.variable {
    padding: 0.5em;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table td.formpage {
    width: 0.5em;
    padding: 0.5em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table td.availability {
    width: 0.5em;
    padding: 0.5em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table td.availability img.icon,
.path-mod-surveypro table td.availability i.icon {
    width: 16px;
    height: 16px;
    padding: 0;
    vertical-align: middle;
    margin-right: 0.2em;
}

.path-mod-surveypro table td.actions {
    width: 3em;
    padding: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table td.actions span.reorder {
    padding: .2em;
}

.path-mod-surveypro table td.actions span.fatspan {
    display: inline;
    border-collapse: collapse;
    border-spacing: 0 0;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    float: none;
}

.path-mod-surveypro table td.actions span.lastspan {
    display: inline;
    border-collapse: collapse;
    border-spacing: 0 0;
    line-height: 20px;
    text-align: right;
    white-space: nowrap;
    float: none;
    padding-left: 0.1em;
    margin-left: 0.1em;
}

.path-mod-surveypro table span.noactionicon {
    padding: 0.2em;
    white-space: nowrap;
}

.path-mod-surveypro table span.spacericon {
    padding-right: 0.2em;
    white-space: nowrap;
}

.path-mod-surveypro table td.actions span.spacericon i.icon {
    width: 1.3em;
}

.path-mod-surveypro table#sortitems td.plugin img.placeholder {
    height: 16px;
    width: 80px;
}

.path-mod-surveypro table td.actions img.icon,
.path-mod-surveypro table td.actions i.icon {
    width: 16px;
    height: 16px;
    padding: 0;
    vertical-align: middle;
    margin-right: 0;
}

.path-mod-surveypro table td.actions a.icon {
    margin-right: 0;
}

.path-mod-surveypro table .header {
    text-align: center;
}

.path-mod-surveypro table .dimmed,
.path-mod-surveypro table .dimmed:hover {
    color: #767676;
}

.path-mod-surveypro table#validaterelations .header {
    text-align: center;
}

.path-mod-surveypro table#validaterelations td.content {
    padding: 0.5em;
    text-align: left;
    vertical-align: middle;
}

.path-mod-surveypro table#validaterelations td.parentconstraints {
    padding: 0.5em;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.path-mod-surveypro table#validaterelations td.status {
    padding: 0.5em;
    vertical-align: middle;
    white-space: nowrap;
}

.path-mod-surveypro table#validaterelations td.status .warningmessage {
    color: yellow;
}

.path-mod-surveypro table#validaterelations td.status .errormessage {
    color: red;
}
/* End of: #manageitems, #sortitems, #managetemplates and #validaterelations tables*/

/* Begin of: submissions table */
.path-mod-surveypro table#submissions {
    width: 100%;
}

.path-mod-surveypro table#submissions td.actions {
    padding: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

.path-mod-surveypro table#submissions .cell {
    vertical-align: middle;
}

.path-mod-surveypro table#submissions .picture {
    padding: 0.5em;
    width: 1.2em;
}

.path-mod-surveypro table#submissions .actions img.icon,
.path-mod-surveypro table#submissions .actions i.icon {
    width: 16px;
    height: 16px;
    margin: 0 0 0 0.45em;
    padding-right: 0;
    vertical-align: middle;
}
/* End of: submissions table */

/* Begin of: selectors for the static field explaining the format needed by each plugin in parentcontent field */
.path-mod-surveypro form#itemsetup table.exampletable {
    padding: 0;
    margin: 0 0 0 20px;
    width: auto;
}

.path-mod-surveypro form#itemsetup td.pluginname {
    padding: 0 20px 0 0;
    vertical-align: top;
    /* width: 60%; */
}

.path-mod-surveypro form#itemsetup td.inputformat {
    padding: 0;
    vertical-align: top;
    /* width: 40%; */
}

.path-mod-surveypro form#itemsetup .felement.fstatic ul {
    line-height: 1.2em;
}

.path-mod-surveypro form#itemsetup .felement .longfield {
    width: 25em;
}
/* End of: selectors for the static field explaining the format needed by each plugin in parentcontent field */

/* Begin of: #managetemplates table*/
#page-mod-surveypro-utemplates table#managetemplates {
    width: 100%;
}

#page-mod-surveypro-utemplates table#managetemplates td.actions {
    padding: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-utemplates table#managetemplates td.actions img.icon,
#page-mod-surveypro-utemplates table#managetemplates td.actions i.icon {
    width: 16px;
    height: 16px;
    margin: 0 0 0 0.45em;
    padding-right: 0;
    vertical-align: middle;
}

#page-mod-surveypro-utemplates table#managetemplates td.actions a.icon {
    margin-right: 0;
}

#page-mod-surveypro-utemplates table#managetemplates .header {
    text-align: center;
}
/* End of: #managetemplates table */

.path-mod-surveypro div.indent-1 > div.felement {
    padding-left: 1.5em;
}
.path-mod-surveypro div.indent-2 > div.felement {
    padding-left: 3em;
}
.path-mod-surveypro div.indent-3 > div.felement {
    padding-left: 4.5em;
}
.path-mod-surveypro div.indent-4 > div.felement {
    padding-left: 6em;
}
.path-mod-surveypro div.indent-5 > div.felement {
    padding-left: 7.5em;
}
.path-mod-surveypro div.indent-6 > div.felement {
    padding-left: 9em;
}
.path-mod-surveypro div.indent-7 > div.felement {
    padding-left: 10.5em;
}
.path-mod-surveypro div.indent-8 > div.felement {
    padding-left: 12em;
}
.path-mod-surveypro div.indent-9 > div.felement {
    padding-left: 13.5em;
}

/* Begin of: fix to owful alignment of fielset legends in surveypro -> cover */
.path-mod-surveypro_cover .coverinfolegend {
    margin-bottom: 0;
    margin-top: 20px;
}
/* End of: fix to owful alignment of fielset legends in surveypro -> cover */

/* table with list of surveypro in index.php */
table.surveypro_index .col1,
table.surveypro_index .col2,
table.surveypro_index .col3,
table.surveypro_index .col4,
table.surveypro_index .col5 {
    text-align: left;
}

table.surveypro_index .col1 {
    white-space: nowrap;
}

table.surveypro_index td span.dimmed {
    color: #999;
}
/* End of: table with list of surveypro in index.php */

/* to correct vertical alignment */
.path-mod-surveypro #userentry .fitem .felement.fgroup,
.path-mod-surveypro #userentry .fitem .felement.feditor,
.path-mod-surveypro #userentry .fitem .felement.fselect,
.path-mod-surveypro #userentry .fitem .felement.fcheckbox,
.path-mod-surveypro #userentry .fitem .felement.fstatic {
    padding-top: 2px;
    padding-bottom: 2px;
}
/* End of: to correct vertical alignment */

/* vertical distance between top margin of a row and input elements is too small */
.path-mod-surveypro #userentry .fitem,
.path-mod-surveypro #usersearch .fitem {
    padding-top: 2px;
    padding-bottom: 2px;
}
/* End of: vertical distance between top margin of a row and input elements is too small */

/* padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements (but not only) */
.path-mod-surveypro #userentry div.rate_check,
.path-mod-surveypro #usersearch div.rate_check {
    padding-bottom: 0.5em;
    padding-top: 0;
}
/* End of: padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements (but not only) */

/* padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements (but not only) */
.path-mod-surveypro #userentry div.fitem_fstatic,
.path-mod-surveypro #usersearch div.fitem_fstatic {
    padding-top: 0;
}
/* End of: padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements (but not only) */

/* Workaround to fix the following accessibility issues found by "Then the page should meet accessibility standards"
  1)  All touch targets must be 24px large, or leave sufficient space
      Ensure touch targets have sufficient size and space
      https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI
  2)  - Target has insufficient size because it is partially obscured
      (smallest space is 23px by 31px, should be at least 24px by 24px),
      Target has insufficient space to its closest neighbors.
      Safe clickable space has a diameter of 22px instead of at least 24px.:
      #firstinitial_page-item_A > .page-link
  3)  - Target has insufficient size (23.4px by 23px, should be at least 24px by 24px),
      Target has insufficient space to its closest neighbors.
      Safe clickable space has a diameter of 18.6px instead of at least 24px.:
      span[data-itemid="469014"][data-itemtype="layout_insearchform"] \
      [data-editlabel="Change search status"] > .quickeditlink.aalink[data-inplaceeditablelink="1"]
  4)  - Target has insufficient size (19.2px by 23px, should be at least 24px by 24px),
      Target has insufficient space to its closest neighbors.
      Safe clickable space has a diameter of 18.6px instead of at least 24px.:
      #hide_item_15
*/
[id^="page-mod-surveypro-"] .initialbar .page-item {
    margin: 2px; /* Create some space between the letter containers */
}

[id^="page-mod-surveypro-"] .initialbar .page-item .page-link {
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px; /* Optional: helps visually highlight the targets */
    box-sizing: border-box; /* Ensures that padding and borders do not affect the 24px */
}

/* Ensures that quick-edit links are always valid, even in headless mode on GitHub */
/* stylelint-disable declaration-no-important */
[id^="page-mod-surveypro-"] .quickeditlink.aalink[data-inplaceeditablelink="1"] {
    min-width: 24px !important;
    min-height: 24px !important;
    align-items: center;
    justify-content: center;
    display: inline-flex !important;
}
/* stylelint-enable declaration-no-important */
/* End of workaround */

/* stylelint-disable declaration-no-important */
#userentry.mform.frozen .mb-3 {
    margin-bottom: 0 !important;
}
/* stylelint-enable declaration-no-important */

/* Begin of: fixed width for action icons and spacers in #manageitems */
//
// The 5 columns have fixed widths corresponding to:
//   col1: 32px  — icon required (inplace editable) slightly wider
//   col2: 28px  — icon outdent ◄
//   col3: 28px  — text [n] (two digits + parentheses)
//   col4: 28px  — icon indent ►
//   col5: 36px  — button ⋮
//
.surveypro-actions-grid {
    display: grid;
    grid-template-columns: 32px 28px 28px 28px 36px;
    align-items: center;
    gap: 0;
}

.surveypro-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove the extra margin/padding that Moodle adds to link buttons */
.surveypro-actions-grid .btn-link {
    padding: 0;
    margin: 0;
}

/* Reduces the gap between Reserved/Public and AddToSearch/RemoveFromSearch icons */
/* stylelint-disable declaration-no-important */
#page td.availability a.action-icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* stylelint-enable declaration-no-important */
