/* Classes used by the HTML that web/js builds (they replace long inline style="" strings). */

/* ---------- main menu ---------- */
.mm_row {
    cursor:pointer;margin:5px;padding:10px;border-radius:5px;background-color:#EEEEEE;border:solid 1px #777777;
}
.mm_row_static {
    cursor:default;
}
.mm_row > table {
    width:100%;
}
.mm_row_text {
    width:100%;
}
.mm_row_unjoined {
    opacity:0.6;
}
.mm_row_name {
    font-weight:bold;
}
.mm_small_button {
    cursor:pointer;border:solid 1px #777777;border-radius:4px;padding:4px;margin-left:4px;background:white;
}
.mm_row:focus, .mm_small_button:focus, .problem_chip:focus, [role=button]:focus {
    outline:3px solid #ffbf47;outline-offset:1px;
}

/* create / edit competition form */
.comp_form {
    height:100%;color:white;border-radius:20px;width:100%;background-color:rgb(30,30,30);overflow-y:auto;
}
.comp_form_edit {
    background-color:transparent;
}
.comp_form_title {
    padding:5px;text-align:center;background-color:rgb(40,40,40);border-radius:20px 20px 0px 0px;
    border-bottom:solid 1px rgb(60,60,60);font-size:32px;
}
.comp_form_body {
    padding:20px;text-align:center;
}
.comp_form_body > label {
    display:block;color:white;font-size:20px;font-weight:normal;margin-top:14px;
}
.comp_form_body > input[type=text] {
    width:100%;max-width:400px;padding:5px;margin:3px auto;color:black;box-sizing:border-box;
}
.comp_form_save, .comp_form_cancel {
    display:block;width:200px;max-width:100%;padding:8px;margin:20px auto 0px auto;
}

/* long (user-chosen) competition names wrap instead of spilling out of the sidebar */
#competition_name, #spec_competition_name, #admin_competition_name {
    word-break:break-word;
}

/* ---------- competition page cards ---------- */
.field_card {
    color:white;margin:60px 60px 0px 60px;border-radius:20px;width:calc(100% - 120px);background-color:rgb(30,30,30);
}
.field_card_title {
    padding:5px;text-align:center;font-size:30px;background-color:rgb(40,40,40);
    border-radius:20px 20px 0px 0px;border-bottom:solid 1px rgb(60,60,60);word-break:break-word;
}
.field_card_body {
    padding:20px;
}
.problem_body {
    font-size:20px;
}
.problem_heading {
    font-size:30px;text-align:left;margin-top:20px;
}
.problem_indent {
    padding-left:20px;
}
.problem_question {
    width:100%;margin-top:20px;word-break:break-word;
}
.problem_section_heading {
    font-weight:bold;text-align:left;margin-top:20px;margin-bottom:20px;
}
.problem_image {
    display:block;max-width:100%;
}
/* Math (Typst) formulas: rendered by the hub as black-on-transparent SVG images, sized in
   em so they follow the text size. invert() makes them white on the dark cards. */
.math_inline, .math_display {
    height:auto;max-width:100%;filter:invert(1);
}
.math_inline {
    display:inline;
}
.math_block {
    text-align:center;margin:0.6em 0;overflow-x:auto;
}
.math_display {
    display:inline-block;
}
.math_error {
    color:#ff8080;font-family:monospace;border-bottom:dotted 1px #ff8080;
}
.problem_subheading {
    font-weight:bold;text-align:left;margin-top:20px;display:inline-block;
}
.problem_toggle {
    top:4px;margin-left:10px;cursor:pointer;
}
.problem_list {
    margin-top:20px;height:auto;font-size:20px;
}
.problem_list > li {
    padding:5px;
}
.case_label {
    display:inline-block;
}
.case_body {
    display:none;height:auto;
}
.case_io_label {
    vertical-align:top;
}
.case_io {
    display:inline-block;font-family:monospace;
}
.problem_editor {
    margin-top:20px;
}
.code_textarea {
    width:100%;background-color:rgb(40,40,40);color:white;font-size:20px;
}
/* the lined-textarea plugin sets pixel widths once; keep it fitting its container */
.linedwrap {
    width:100% !important;max-width:100%;box-sizing:border-box;
}
.linedwrap .linedtextarea textarea {
    width:calc(100% - 60px) !important;
}
.submit_buttons .submit_button {
    width:auto;margin:30px 10px 0px 0px;display:inline-block;
}
.submit_button:disabled {
    opacity:0.5;cursor:not-allowed;
}
.submit_status {
    margin-top:12px;font-size:18px;min-height:1.2em;
}
.empty_note {
    font-size:20px;
}
.table_scroll {
    width:100%;overflow-x:auto;
}
.sidebarbutton.table_button {
    width:auto;display:inline-block;margin:4px;
}
.sidebarbutton.danger_button {
    border-radius:10px;background-color:#c9302c;
}
.problem_chip {
    cursor:pointer;box-sizing:content-box;position:relative;border-radius:4px;padding:4px 4px 4px 24px;
    background-color:rgb(40,40,40);border:solid 1px rgb(60,60,60);display:inline-block;min-height:16px;
    line-height:16px;margin:2px;
}
.problem_chip_static {
    cursor:default;background-color:transparent;border:none;
}
.problem_chip_dot {
    position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:100%;
}
.popup_message {
    font-size:20px;
}
.fieldsub_placeholder {
    line-height:calc(100vh - 80px);font-size:30vh;color:rgb(30,30,30);text-align:center;
}

/* ---------- admin ---------- */
.add_competitor_row {
    margin-bottom:25px;
}
.add_competitor_row > input {
    color:black;width:400px;max-width:100%;display:inline-block;border-radius:8px;padding:3px 6px;
}
.add_competitor_row > select, .competitor_group_select {
    color:black;display:inline-block;border-radius:8px;padding:3px;margin-left:20px;
}
.add_competitor_row > button {
    height:auto;width:auto;display:inline-block;margin-left:20px;
}
.competitor_online {
    color:#4cff4c;
}
.competitor_offline {
    color:#ff7b7b;
}
.admin_name_input {
    border-radius:5px;width:400px;max-width:100%;color:white;background-color:rgb(40,40,40);
}
.admin_name_input_new {
    color:black;background-color:white;
}

/* ---------- connection status ---------- */
.connstatus {
    position:fixed;z-index:36236;left:0px;bottom:0px;background:rgba(0,0,0,0.6);padding:2px 8px;
}
.connstatus_bad {
    color:#ff7b7b;
}
.connstatus_good {
    color:#4cff4c;
}

/* ---------- password reset page ---------- */
#resetpasswordpage {
    text-align:center;padding:40px 16px 60px 16px;
}
#resetPageInstructions {
    color:white;
}
#resetpasswordpage form {
    margin-top:30px;
}
.reset_input {
    display:block;width:400px;max-width:100%;padding:10px;height:auto;margin:5px auto;box-sizing:border-box;
}
.reset_notif {
    display:none;width:400px;max-width:100%;padding:10px;height:auto;margin:5px auto;box-sizing:border-box;
}