.toolbar {
	width: fit-content;
	margin: 0 auto;
}

.time-grid {
    display: grid;
    gap: 14px;
}

.time-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(150px, 1.2fr) auto minmax(72px, 90px);
    gap: 10px;
    align-items: center;
}

.hour-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    align-items: center;
}

.hour-button {
    width: 38px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    color: var(--color-text);
    text-align: center;
}

.hour-button:hover {
    background: rgba(255,255,255,0.13);
}

.hour-button.active {
    background: #ffffff;
    color: #020204;
    border-color: #ffffff;
}

.hour-button:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.free-hours-input {
    width: 100%;
    min-width: 72px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    color: var(--color-text);
    text-align: center;
}

.free-hours-input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}

.free-hours-input::placeholder {
    color: rgba(255,255,255,0.45);
}

.comments-zone {
	position: relative;
}

.comments-zone textarea::placeholder {
	color: rgba(255,255,255,0.48);
	font-style: italic;
}

.admin-columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.admin-columns > .admin-list-card
{
	flex-grow: 1;
}

.admin-columns > .admin-list-card > select
{
	padding: 2rem;
}

.admin-list-card h2,
.admin-editor h2 {
	grid-column: 1  / 3;
	text-align: center;
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 600;
}

.admin-list-card select {
	width: 100%;
	min-height: 180px;
	padding: 8px;
}

.admin-editor {
	width: min(100%, 560px);
	margin: 0 auto;
}

.editor-fields {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 12px;
}

.editor-field {
	columns: 2;
	display: contents;
	gap: 12px;
	align-items: center;
}

.editor-field label {
	text-align: right;
	color: var(--color-text);
	font-size: 0.92rem;
}

@media (max-width: 980px) {
	.time-row {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: var(--radius-md);
        background: rgba(255,255,255,0.035);
    }

    .free-hours-input {
        grid-column: 1 / -1;
    }

}

	@media (max-width: 640px) {
	.time-row {
        grid-template-columns: 1fr;
    }

	.editor-field {
		grid-template-columns: 1fr;
	}

	.editor-field label {
		text-align: left;
	}
}