/* Make body wider for dataset */
body:has(.artux-dataset) .mw-body-content {
    max-width: 90vw;
}

/* Dataset object */
.artux-dataset {
	display: grid;
	gap: 10px;
	border-radius: 5px;
	padding: 1rem;

	background-color: #a6a6a6;

	h3 {
		margin: .5rem 0;

        i {
            margin-right: .5rem;
        }
	}
}

/* Sections */
.dataset-sec {
	padding: 10px;
	display: grid;
	gap: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	min-width: 0;

	h3 {
		grid-row: 1;
		grid-column: 1 / -1;
	}

    h4 {
        margin: 0 0 1rem;
    }

	background-color: #51a0af;

	.dataset-field {
		padding: 1rem;
		border-radius: 5px;
		background-color: white;

        &.no-access {
            background-color: #cacaca;
        }
	}
}

/*=====================*/
/* Relevant to display */ 
/*=====================*/
.artux-display #artux-dataset-header {

    /* position: sticky; */
    /* top: 8rem; */
    padding: .5rem;
    display: flex;
    gap: .5rem;

    div {
        padding: .5rem;
        font-size: 1rem;
        background-color: white;
        border-radius: 5px;
    }

    .pusher {
        margin-left: auto;
        background-color: transparent !important;
    }

    button {
        padding: .5rem;
        font-size: 1rem;
        cursor: pointer;
        background-color: white;
        border: none;
        border-radius: 5px;


        &:hover {
            background-color: #ecf6ff;
        }
    }
}

.artux-display .dataset-field {
    /* may be irrelevant */
    p {
        white-space: break-spaces;
        /* word-break: break-all; */
        word-break: break-word;

br {
            margin-bottom: .5rem;
        }
    }

    .field-content {
        display: block;
        overflow: hidden;
        white-space: break-spaces;
        /* word-break: break-all; */
        word-break: break-word;

        ol li {
            margin-bottom: .5rem;
        }

        figure {
            margin: 0;
            width: 100%;
            
            audio {
                width: 100%;
            }

            video {
                margin: 0 auto;
            }
        }

        .dataset-title-image {
            white-space: collapse;
        }

    }
}

.artux-display table {
    width: 100%;

    tr {
        background: hsl(300, 0%, 90%);
    }

    td {
        padding: 5px;
    }

    td:nth-child(1) {
        white-space: nowrap;
        /* Shrinks to fit content */
        width: 0px;
    }

    td:nth-child(2) {
        /* Ensures it takes the remaining space */
        max-width: 0px;
    }
}




/*==================*/
/* Relevant to form */ 
/*==================*/

.artux-form pre {
	white-space: collapse;
	display: contents;
	font-family: inherit;
}

.artux-form .dataset-sec {
	
	
	input, textarea, select {
		border-radius: 0 !important;
		font-size: 1rem;
	}
	
	fieldset {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.5rem 1rem;
		border: none;
		padding: 1rem 0;
		margin: 0;

		> legend {
			padding: 0;
			font-weight: bold;
		}

		> span {
			grid-column: 2;
		}
	}

	textarea {
		width: 100% !important;
		height: 100%;
		box-sizing: border-box;
	}

	span[data-input-type="text"] input {
		width: 100%;
		box-sizing: border-box;
	}

    td.instanceMain {
        padding: 0;
    }
    
    .comboboxSpan .oo-ui-comboBoxInputWidget {
        width: 100% !important;
    }

    .multipleTemplateWrapper {
        grid-column: 1 / span 2;
        overflow-wrap: anywhere;
    }

	.radioButtonSpan {
		display: grid;
	}

	.checkboxesSpan,
	.radioButtonSpan {
		display: grid;
		gap: 10px;

		.checkboxLabel {
			height: 100%;
			float: left;
			display: flex !important;
		}

		label:hover {
			cursor: pointer;
		}
	}
	
	.instanceMain {
		display: grid;
		gap: 10px;
	}
}









/* LEGACY DELET LATER */


.archium-grid-item-separator {
    width: 95%;
    height: 3px;
    border-radius: 5px;
    margin: 5px auto;

    background-color: white;
}

.dataset-sec.s-title {
    padding: 0;
    display: grid;
    grid-template-columns: auto min-content;

    background: transparent !important;

    .archium-grid-item-header {
        display: flex;
        align-items: center;
        white-space: nowrap;

        background-color: white;
        border-radius: 5px;
    }

    .archium-dataset-tool {
        font-size: 1.2em;

        &:hover {
            background: hsl(0, 0%, 90%);
            cursor: pointer;
        }
    }

    h3 {
        margin: 0;
    }

    span {
        padding: 5px 10px;
        border-radius: 5px;
    }
}